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Prefácio 


Por que produtos ou serviços digitais similares fazem mais sucesso do que 
outros? Um fator de peso está na relação entre o usuário e o produto. Nesse 
mundo conectado em que vivemos, cada vez mais ganha força o que con- 
sidero antropocentrismo digital: o usuário é o rei. Se ele não tem uma boa 
experiência com o produto digital, ele deixa de utilizá-lo e migra para inter- 
faces mais inteligentes, agradáveis e de fácil uso. E o diferencial do produto 
ou serviço digital pode residir justamente ali. 

Se você trabalha com algum produto ou serviço digital, ou usa o digital 
(website, mobile app) para comunicar-se com seu público, esse livro é obri- 
gatório em sua biblioteca - mesmo que virtual. 

Não temos tempo para ler manuais - seguimos padrões cognitivos de 
navegação cada vez mais intuitivos. Um sistema pode ser extraordinário em 
termos da complexidade de desenvolvimento, otimização no processamento 
computacional ou das integrações com N outros sistemas online. Se aquela 
camada do software que faz a interface com o usuário não é agradavelmente 
usável, o resultado de todo o seu incrível trabalho tecnológico de bastidores 
pode ter sido em vão ou negativamente impactado, pois não atingiu quem 
deveria: o usuário final. 

Se o profissional de UX já faz parte de sua vida como desenvolvedor e você 
acha que o entregável dele restringe-se a wireframes, você verá nesse livro que 
existe muito mais ciência no seu trabalho, explorando o user journey, user 
stories, blueprint, passando por personas e mapeamento do ecossistema. 

Existe muito trabalho intelectual de pesquisa de um bom UX Designer e 
de questionamento constante: essa solução de interface é a que melhor mate- 
rializa uma boa experiência para o usuário desse produto? Ou ainda: dentro 
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do prazo que temos, quais funcionalidades devem ser priorizadas? 


Dentro da Computação existe uma disciplina que às vezes aparece na 
grade curricular um pouco perdida ou até mesmo negligenciada, que é a HCI 
ou IHC (Interação Homem-Computador). Ela demonstra que a preocupação 
com o usuário não é privilégio do mundo digital, da internet: as primeiras 
publicações datam da década de 70. É interessante também observar como 
metodologias que passam pela área do desenvolvimento, como Agile ou Lean 
Design, são naturalmente transportadas para o mundo UX. Esses são apenas 
exemplos para comprovar o quanto o UX tem uma grande afinidade com a 
Computação. 

Creio que seja por isso que, desde o início de minha carreira em desen- 
volvimento web, encontrei nesse profissional - que na época era chamado 
apenas de arquiteto de informação - um elo de ligação entre o desenvolvi- 
mento que é vinculado à tecnologia e à concepção do site atrelado à criação. 
Era o profissional da área de criação que tinha um pensamento mais próximo 
ao meu, pendendo para o lógico e estruturado. 


O nome “arquiteto de informação” foi pessoalmente importante para que 
pudesse entender o seu papel e sua relação com o meu trabalho: ambos está- 
vamos construindo uma casa, um edifício ou um “sitio” A ele, como arquiteto, 
cabia definir quais cômodos teria na casa e suas disposições para que a pessoa 
que fosse visitá-la tivesse a sensação de que era funcional e agradável. A mim, 
como programador - ou engenheiro -, construir o alicerce, levantar as vigas, 
as paredes, a laje e todo o necessário para dar vida ao projeto. Tecnicamente, 
é possível um engenheiro construir uma casa sem um arquiteto? Sim. Ela 
tem chance de ser extraordinária e única do ponto de vista estético? Difícil. 
Mas isso não quer dizer que o engenheiro não possa entender um pouco do 
mundo do arquiteto, até por estarem tão conectados pelo produto final. 


Tive a sorte de encontrar pelo meu caminho bons profissionais que en- 
tendiam que, para fazer bem o seu trabalho, precisavam do input de outras 
pessoas — inclusive dos programadores - em um processo de trabalho mais 
colaborativo. 


O autor desse livro é quem melhor personifica para mim a competên- 
cia nessa matéria, tanto por ser um estudioso incansável de novas metodolo- 
gias relacionadas à evolução da disciplina em si, quanto pelo papel que sem- 


ii 


Casa do Código 





pre exerce nos projetos em que trabalha: a preocupação com o usuário final 
e com as pessoas que trabalham nesse processo, incentivando-as a fazer os 
mesmos questionamentos sobre usabilidade e, consequentemente, constru- 
indo um melhor produto final. O importante para ele não é apenas o fim, 
mas o processo para chegar lá, que pode ser igualmente recompensador. Ou 
até mais. Compartilhamos dessa crença. 

Compartilhar o conhecimento faz parte da vida do autor, seja no blog que 
mantém (http://arquiteturadeinformacao.com) , nesse próprio livro e até em 
sua lista de lugares para visitar no Foursquare. Se você um dia quiser dicas 
do que fazer em NYC, por exemplo, procure o usuário dele nessa rede social, 
que encontrará uma lista devidamente categorizada por assunto. 

No capitulo introdutório, Fabricio sabiamente procura alinhar as expec- 
tativas de você, leitor, (já é uma amostra de como ele se preocupou com a sua 
experiência ao ler o livro) e faz um convite para trilhar com ele a jornada do 
UX Design, que não acaba nesse livro. Reforço esse convite, pois você não vai 
se arrepender de explorar esse mundo que está em constante evolução. E não 
se surpreenda se ao chegar ao final do livro você se sentir tentado a investigar 
mais o assunto: é isso que fazem os bons livros. 
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Do que trata o livro 


UX Design - Introdução e boas práticas no Design da Experiência do Usuário é 
uma coletânea de artigos sobre User Experience Design para quem trabalha 
com design e desenvolvimento de produtos digitais - seja em portais, agên- 
cias de publicidade, startups, consultorias ou empresas que de alguma forma 
estejam envolvidas com criação de software. 

Com as interfaces digitais dominando cada vez mais os novos aspectos 
de nossas rotinas, aumenta também a procura por profissionais especializa- 
dos em Design da Experiência do Usuário (UX Design) para garantir que 
esses produtos sejam, acima de tudo, fáceis e agradáveis de usar. Em um mer- 
cado cada vez mais competitivo, diferenciam-se os produtos e empresas que 
colocam o usuário no centro do processo de Design, envolvendo-os desde as 
etapas de estratégia e concepção até as etapas de desenvolvimento e testes. 

Nos últimos anos tenho procurado colaborar com a comunidade 
de designers e desenvolvedores brasileiros através de meu blog (http:// 
arquiteturadeinformacao.com) , onde compartilho artigos, links e reflexões 
relacionados a UX Design. Ainda assim, muita gente entra em contato 
comigo procurando saber mais sobre a disciplina, mencionando a dificuldade 
em encontrar textos em português sobre o assunto. Um dos objetivos deste 
livro é disseminar informação sobre UX Design por novos canais, de forma 
didática, simples e centralizada. 
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CAPÍTULO 1 


O que é User Experience 


Apesar do estrangeirismo que deu origem à sigla UX (User eXperience), o 
termo é bem mais simples do que parece. Experiência do usuário. Experiência 
de quem usa. 

No decorrer do dia nos tornamos “usuários” de uma porção de coisas. 
O alarme do celular que nos acorda de manhã, a cadeira, o carro, o cont- 
role remoto do ar condicionado, o Facebook, os talheres, o caixa eletrônico, o 
computador no trabalho, o copo de cerveja — objetos e produtos, digitais ou 
não, que são “usados” por pessoas e que são projetados para cumprir alguma 
função. O alarme para nos acordar, o caixa eletrônico para fazer transações 
financeiras, a cadeira para descansar. 

Quando você usa algum desses objetos, você tem uma experiência. Se 
você já passou nervoso na frente do caixa eletrônico porque ele não entregou 
o dinheiro que você estava esperando e não deu nenhuma explicação sensata 
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sobre o motivo da recusa, você possivelmente teve uma péssima experiência 
enquanto usuário do caixa eletrônico. 

Experiência do usuário existe desde que o mundo é mundo. Ou melhor, 
desde que as pessoas começaram a “usar” objetos para realizar alguma tarefa. 

Depois, vieram produtos digitais. Websites, aplicativos de celular, caixas 
eletrônicos, quiosques interativos, tablets, TVs digitais, videogames. O 
princípio continuou o mesmo: a experiência de usar um site, por exemplo, 
pode ser positiva ou negativa, dependendo do seu fluxo dentro dele. Nor- 
malmente, a experiência é positiva quando você consegue realizar a tarefa 
sem demora, frustração ou sem encontrar problemas no meio do caminho. 
Essa tarefa pode ser tanto funcional (entrar no seu internet banking para pa- 
gar um boleto bancário) ou emocional (entrar no site de uma rede social para 
saber o que seus amigos andam fazendo). 

Experiências são, obviamente, subjetivas. Cada pessoa tem uma exper- 
iência diferente ao usar um caixa eletrônico, por exemplo. Essa experiência é 
influenciada por fatores humanos (sua habilidade em usar caixas eletrônicos, 
sua visão, sua habilidade motora, sua capacidade de ler e entender o que está 
escrito na tela, seu humor naquele momento etc.) e por fatores externos (o 
horário do dia, o ambiente onde o caixa eletrônico está instalado, o fato de ter 
uma fila de pessoas atrás de você). Mas, apesar de subjetivas, essas experiên- 
cias são projetadas por alguém. Alguém pensou e desenhou a interface digital 
do caixa eletrônico para que os clientes do banco pudessem fazer transações 
sem precisar da interface humana. É a tal “interação homem-máquina” (HCI 
— Human-Computer Interaction), um campo de estudo grandiosíssimo que 
mobiliza profissionais de vários perfis ao redor do mundo. 


“A maioria das pessoas acredita que User Experience é somente encontrar a 
melhor solução para os seus usuários - mas não é. UX se trata sobre definir o 
problema que precisa ser resolvido (o porquê), definir para quem esse 
problema precisa ser resolvido (o quem), e definir o caminho que deve ser 


percorrido para resolvê-lo (o como)” 
— Whitney Hess 


Capitulo 1. O que é User Experience 
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1.1 ÁS DISCIPLINAS DE UX 
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Figura 1.1: Diagrama das disciplinas que compõem User Experience 


Dan Saffer, designer de interação e autor do livro Designing for Interaction 

(http://www.designingforinteraction.com) , construiu um diagrama há al- 

guns anos que define bem as intersecções e nomenclaturas da disciplina. 
Repare como o grande círculo de User Experience Design engloba uma 
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série de outras disciplinas: de Arquitetura de Informação a Design Industrial, 
passando até por Sound Design. Sim, aquele sonzinho que toca quando você 
inicia seu PC ou Mac também faz parte da experiência do usuário. E, como 
todo elemento da experiência do usuário, também foi projetado por alguém. 

Uma outra forma interessante de ilustrar o que é User Experience Design 
vem de Stephen Anderson, autor do livro Seductive Interaction Design (http: 
//www.goodreads.com/book/show/9967766-seductive-interaction- design) . 


AUMENTAR 


A MOTIVAÇÃO 
(PSICOLOGIA) 


—+ 


REDUZIR 
A FRICÇÃO 
(USABILIDADE) 


UX designers trabalham para construir produtos que sejam faceis de usar 
(a tal usabilidade), reduzindo a fricção e permitindo que os usuários com- 
pletem a tarefa desejada em menos tempo, com menos ruído e obstáculos. Ao 
mesmo tempo, apoiam-se em princípios da psicologia para motivar o usuário 
e incentivá-lo a seguir adiante. 

Você já deve ter tido a experiência de ficar horas jogando um mesmo jogo, 
seja no videogame, no celular ou no computador. Os jogos são experiências 
que conseguem equilibrar muito bem esses dois aspectos. 
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Normalmente,lk./ as primeiras fases de um jogo são propositalmente sim- 
plificadas para fazer o usuário se engajar com ele: a mecânica e os controles do 
jogo são explicados (usabilidade) e várias técnicas motivacionais são usadas 
para fazer com que o jogador se sinta confiante em suas próprias habilidades 
(psicologia). 


Plop those tomato seeds 
in the empty plots now. 





Figura 1.2: “Parabéns, você colheu seu primeiro tomate! 


A mesma regra se aplica para os projetos nos quais você trabalha, se- 
jam eles jogos, websites, aplicativos para celular, serviços digitais, sites de e- 
commerce etc. Como fazer o seu usuário completar as tarefas sem dificul- 
dades? Como criar uma interface que seja realmente simples de usar? Como 
manter o usuário motivado para seguir adiante, para passar mais tempo us- 
ando o seu produto, para divulgar o seu produto para os amigos ou para voltar 
mais vezes a ele? 
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1.2 O QUE FAZ UM UX DESIGNER 


Se você trabalha em agência de publicidade, portal, startup, consultoria ou 
produtora digital, ou qualquer empresa que esteja de alguma forma envolvida 
em desenvolvimento de software, você já deve ter esbarrado com um UX de- 
signer em algum lugar. Seja em um manual de boas práticas para construir 
sites, seja em uma conferência internacional dos publicitários que voam de 
primeira classe ou seja aquele fulano de job description nebuloso que está sen- 
tado na mesma sala de reunião que você. 

Mas apesar de o nome da profissão conter a palavra “designer”, esses 
profissionais não necessariamente usam o Photoshop para criar a aparência 
final do produto que será visto pelas pessoas. Como projetistas da experiência 
do usuário, o mais importante para os UX designers é definir como as pessoas 
irão interagir com o produto, quais tarefas conseguirão realizar dentro dele, 
qual a ordem na qual as telas serão apresentadas - e por aí vai. Normalmente, 
existe uma etapa seguinte ao trabalho do UX designer onde um diretor de 
arte faz com que a interface tome forma no Photoshop e fique muito mais 
agradável e bem acabada. 

UX designers começaram a surgir nesses ambientes como “arquitetos de 
informação”, sendo essencialmente responsáveis por organizar o conteúdo de 
um site dentro do menu e desenhar caixinhas cinzas que representam como 
uma interface irá funcionar (os tais “wireframes”). 

Mas à medida que o ecossistema digital das marcas se tornou complexo 
demais para caber em menus, esses mesmos sujeitos acabaram assumindo um 
papel um pouco mais estratégico no processo criativo. Hoje, algumas empre- 
sas já colocam o UX designer fazendo o meio de campo entre o pensamento 
estratégico (planejar um produto) e o pensamento prático (desenhar um pro- 
duto), ajudando a definir como as ideias, especialmente as digitais, irão tomar 
forma. 

No dia a dia, o UX designer trabalha desenhando a estrutura desses pro- 
dutos digitais. Ele não chega a definir a identidade visual do produto - nor- 
malmente, isso fica a cargo de um profissional especializado em Direção de 
Arte. Em vez de definir se o botão será azul ou vermelho, retangular ou 
arredondado, o papel do UX designer é definir questões mais estratégicas so- 
bre tal botão: 


Casa do Código Capítulo 1. O que é User Experience 





* Por que o botão existe? 


e Qual a importância dele naquele contexto ou página em que ele 


aparece? 


e Ele é a ação primária ou secundária que o usuário pode tomar naquele 


momento? 
e Para onde o usuário será levado quando clicar no botão? 
e O que o texto do botão deve dizer para o usuário? 


e O botão está sempre ativo, ou ele só é ativado depois que o usuário 
preencher determinado campo em um formulário? 


e Todos os usuários, logados ou não no site, veem o mesmo botão? 


e O tamanho do botão está adequado para ser clicado tanto com o pon- 
teiro do mouse em um computador desktop quanto por um dedo hu- 
mano em uma interface touch (celular, tablet)? 


e Ad infinitum. 


A lista é grande. Repare que algumas dessas decisões não são tomadas 
exclusivamente pelo UX designer: algumas delas são feitas em conjunto com 
o diretor de arte, com o desenvolvedor, com o gerente de projetos e outros 
profissionais que também estão envolvidos na criação do produto. 

Costumo dizer que o profissional de UX é um ca- 
maleão dentro do time (http://www.uxbooth.com/articles/ 
the-ux-chameleon-and-its-multidisciplinary-skin) : precisa saber se 
adaptar a diferentes contextos, conhecer o vocabulário de diferentes profis- 
sionais (saber falar “a língua” do programador front-end, mas também 
conhecer os jargões dos designers) e entender um pouco de cada disciplina. 

Mas, acima de tudo, os UX designers precisam conhecer sobre pessoas. 
Os próximos capítulos deste livro falam um pouco mais sobre isso. 
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1.3 QUALQUER UM PODE SER UX DESIGNER 


Hoje em dia existe muito misticismo em torno da figura do UX designer, de 
qual o seu papel dentro de um time e de quais os requisitos para que alguém 
coloque a sigla “UX” no nome do cargo no Linkedin. Na prática, basta ter 
bom senso, organização, pensamento sistemático e disposição de entender 
do que as pessoas precisam. 


“Eu já tive um pouco de problema em entender o que um UX designer faz de 
verdade, e eu continuo chegando sempre à mesma conclusão: um user 
experience designer não faz nada de especial. Ele é só um designer. Todos os 
produtos têm uma experiência do usuário (UX). E essa experiência não é 


explicitamente desenhada; é um subproduto de desenhar uma interface” 
— Daniel Eden 


Fonte: http://daneden.me/2013/03/20/ux-is-not-a-standalone-job 

A citação vai direto ao ponto: todos os profissionais que contribuem de 
alguma forma para a construção de uma interface que será usada por pessoas 
são, por tabela, designers da experiência do usuário (ou UX designers). 

A convenção de ter um profissional 100% dedicado a “puxar a sardinha” 
para o lado do usuário é apenas o remédio para um problema anterior: um 
modelo de trabalho que muitas vezes negligencia a importância de se desen- 
har produtos que sejam focados em necessidades reais de pessoas reais. Não 
adianta uma interface linda, com cores marcantes e bom gosto visual, se ela 
não está resolvendo aquilo que as pessoas querem resolver ao usá-la. Se o 
gerente de projetos está preocupado com verba e prazo, o desenvolvedor está 
preocupado com as limitações técnicas de determinada linguagem e o cliente 
está preocupado com os objetivos de negócios da marca, o UX designer é o 
profissional que entra na equação para assumir o papel de advogar pelos in- 
teresses do usuário. 

Uma prova de que os requisitos para ser um UX designer são mais sim- 
ples do que parecem é o fato de que vários profissionais da área vêm de for- 
mações diferentes: jornalistas, publicitários, designers gráficos, engenheiros, 
bibliotecônomos. Também são comuns profissionais que, antes de serem UX 
designers, trabalhavam como programadores front-end, redatores ou ger- 
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entes de projetos. Algumas vezes são pessoas que desempenham um papel 
híbrido entre duas ou mais dessas disciplinas. 


1.4 AS DIFERENTES FACES DO UX DESIGNER 


Por ser uma área bastante ampla, alguns UX designers acabam assumindo 
funções mais específicas à medida que avançam em sua carreira. É um pro- 
cesso natural, já que perfis diferentes de pessoas podem ter mais facilidade 
com uma área ou outra dentro do Design. 

Se você tem facilidade em organizar conteúdo, é possível que prefira focar 
seus esforços em Arquitetura de informação ou taxonomia. Se tem facilidade 
em lidar com pessoas, talvez prefira investir em Pesquisa com usuários. 

Mas se esses termos ainda não são familiares para você, veja a seguir uma 


breve explicação de algumas das principais subáreas de UX: 





Arquitetura de informação: a disciplina tem suas raízes na bibliotecono- 
mia (organizar e catalogar os títulos dentro de uma biblioteca para que se- 
jam facilmente encontradas pelo visitante) e é de certa forma similar no am- 
biente digital. Como fazer com que as informações sejam organizadas no 
menu de um site, por exemplo, de forma que sejam acessadas facilmente pe- 
los usuários? Qual perfil de usuário está buscando qual tipo de informação? 
Como os itens estão ordenados, agrupados e organizados dentro da estrutura 
do site? 
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Usabilidade: garantir que as interfaces sejam fáceis de usar. O usuário 
consegue realizar uma tarefa sem transtorno ou demora? Em um número 
razoável de passos? As informações são fáceis de entender? O residual após a 
experiência é positivo, ou o usuário saiu cognitivamente exausto dali? 


Design de interação: entender e definir o comportamento das interfaces 
quando o usuário interage com elas. O que acontece quando eu clico em de- 
terminado botão? Como a interface responde? Como eu arrasto um produto 
para meu carrinho de compras? Qual a exata quantidade de informação que 
o usuário precisa saber para realizar a tarefa naquele momento? Como a in- 
terface pode ser usada para criar uma narrativa na experiência do usuário? 


y 


ee et 
T = 


Taxonomia: organizar e rotular a informação de forma que faça sentido 
para o usuário. A categoria da loja virtual irá se chamar “Refrigeradores” ou 
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“Geladeiras”? E se o usuário buscar por “Freezer”, o que acontece? O perfil de- 
mográfico do usuário daquele site/app está habituado com aquela linguagem? 
Como classificar as editorias de um portal de notícias? Quase tudo que existe 
no mundo pode ser classificado de acordo com algum esquema taxonômico 
— de espécies de plantas a países e continentes. 





Estratégia de design: é o entendimento e definição dos porquês do pro- 
duto. Para quem ele foi criado? Como o produto evolui com o passar do 
tempo? Quais os seus objetivos de negócio e como eles serão alcançados em 
cada etapa de sua evolução? Como medir sucesso uma vez que o produto é 
lançado? Qual o retorno esperado? Quais ferramentas de design podem ser 
usadas para atingir e mensurar esse sucesso? 


Pesquisa com usuários: é o entendimento do público-alvo do produto. O 
que faz uma pessoa ir até o site? Quais as necessidades, anseios e motivações 
que essa pessoa tem ao usar o produto? Quais as principais tarefas que ela 
quer realizar? Quais as particularidades do comportamento desse grupo de 
usuários que influenciam as decisões de design à medida que o produto é 
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construído ou evolui? 


1.5 O QUE UX DESIGN NÃO É 


Para começo de conversa: UX Design não é direção de arte. Também não 
é planejamento, não é gerência de projetos, não é desenvolvimento de soft- 
ware. UX faz o meio de campo entre todas essas disciplinas, garantindo que 
todas elas estejam caminhando juntas em direção a um mesmo objetivo. É o 
UX designer, por exemplo, que traduz a estratégia criada pelo planejador em 
forma de telas e fluxos que serão utilizados pelo usuário. 

UX também não é, definitivamente, uma disciplina exata. Muitas vezes, 
as pessoas procuram se aproximar de UX Design para conseguirem tomar 
decisões sobre “qual tipo de menu usar no meu site” ou “como melhorar a 
usabilidade para aumentar as conversões do meu formulário de cadastro”. 

O fato é que as respostas para essas perguntas dependem de uma quanti- 
dade tão grande de fatores que é impossível afirmar com precisão que o cam- 
inho certo é o A ou o B. Mas também é essa grande parte da beleza do De- 
sign: o fato de que tudo depende de como as pessoas se comportarão, algo 
bastante difícil de prever. O UX designer não é um profeta que sabe como 
as pessoas pensam; ele é um pesquisador que investiga o que levou uma de- 
terminada pessoa a agir de determinada forma e então propõe melhorias de 
design baseadas nesses insights. 

UX Design também não é uma disciplina de um software ou linguagem 
só. Podem até existir UX designers especializados em desenhar sites em 
HTML, ou aplicativos em C++; mas por ser centrada no comportamento 
humano, a teoria que estrutura o trabalho desse profissional é agnóstica de 
código, plataforma ou tamanho de tela. 


1.6 DESENVOLVEDORES TAMBÉM SÃO UX DESIGNERS 


Antigamente existia um certo atrito entre designers (não só UX) e desenvolve- 
dores no decorrer do andamento dos projetos. Em alguns lugares isso ainda é 
comum. Designers brigando pela perfeição dos pixels, que por falta de com- 
petência do desenvolvedor não tinham ficado iguais ao Photoshop na hora 
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de transformar a interface em HTML. Do outro lado, desenvolvedores recla- 
mando do “excesso de criatividade” dos designers na hora de bolar layouts 
que pudessem ser replicados na linguagem do produto final. 


THE WAR BETWEEN DEVELOPERS, DESIGNERS & PROJECT MANAGERS 


PROJECT 
DEVELOPERS DESIGNERS MANAGERS 
SEEN BY É FDR 


DEVELOPERS | N 





SEEN BY 


DESIGNERS 


SEEN BY 
PROJECT 
MANAGERS 


Figura 1.3: Como designers, desenvolvedores e gerentes de projetos se veem 


Mas os tempos mudaram. A linguagem visual das interfaces digitais 
amadureceu muito nos últimos anos, foi ficando mais sóbria, flat, com menos 
elementos decorativos e mais foco em permitir que o usuário realize tarefas 
com facilidade. O advento do design responsivo e a necessidade de criar lay- 
outs fluidos que se adaptem a múltiplas resoluções de tela também fizeram 
com que as equipes aos poucos se desapegassem do excesso de grafismos e da 
precisão dos pixels, que passou a ser alcançável apenas dentro do fantástico 
mundo do Photoshop. 

Do outro lado, desenvolvedores passaram a se preocupar mais com a ex- 
periência do usuário e a aceitar sugestões dos designers que focassem em mel- 
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horar a usabilidade do produto. Afinal, o desenvolvedor compreendeu que o 
designer não estava lá só para dificultar sua vida. 

Essa aproximação e simbiose entre as áreas é um movimento extrema- 
mente saudável, e quem sai ganhando é o usuário final. 

Hoje, bons designers já perceberam que são os desenvolvedores que fazem 
dele um bom designer, já que são eles os responsáveis por fazer suas ideias 
tomarem forma. Designers sem desenvolvedores só fazem layouts estáticos, 
que ficam bonitos no portfólio mas que não chegam a impactar positiva- 
mente a rotina do público final. Por outro lado, desenvolvedores sem de- 
signers criam sistemas robustos e poderosos, mas que às vezes pecam em ser 
agradáveis e fáceis de usar. 

Veja no box o depoimento de Brad Frost (http://bradfrostweb.com) , um 
programador front-end que ficou conhecido por estudar e contribuir com o 
conhecimento da comunidade de desenvolvedores sobre design responsivo. 
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DEPOIMENTO DE BRAD FROST 


“Mesmo quando meu cargo era nomeado ‘web developer’ ou ‘open 
standards developer, eu costumava me nomear ‘front-end designer. 
Agora eu simplesmente me nomeio ‘web designer. Desenvolvimento de 
HTML e CSS é design. Os projetos mais frustrantes de que participei são 
aqueles onde as pessoas não entendem por que desenvolvimento front- 
end precisava ser envolvido cedo no processo de design. Os projetos mais 
recompensadores, por outro lado, foram aqueles que envolveram desen- 
volvedores front-end desde o começo. 

Eu especificamente evito chamar meu cargo de desenvolvedor porque 
as pessoas acabam assumindo que eu posso programar em Ruby ou nor- 
malizar alguns bancos de dados. Eu nunca tive nenhuma aula de Ciência 
da Computação. (...) Quase todo trabalho de programação que eu fiz 
era para manipular elementos em uma tela. Apesar de aos poucos con- 
tinuar aprendendo coisas sobre programação, eu não ousaria me chamar 
de programador. 

HTML não é programação. CSS não é programação. Mas, porque 
eles ainda assim são códigos, desenvolvedores front-end muitas vezes são 
colocados na mesma gaveta dos programadores Python, Java, PHP, Ruby, 
C#, C++, Objective C etc., em vez de serem colocados juntos do time de 
design. Isso é um grande problema. 

À medida que a Web continua se tornando incrivelmente complexa, 
é bastante importante atentar às inúmeras formas pelas quais uma ex- 
periência na web pode ser desenhada. É impossível para designers tra- 
balhando em ambientes estáticos conseguirem articular realisticamente 
cada dispositivo, configuração de usuário e variável que afeta como o 
design é materializado. Por esse motivo, desenvolvedores front-end pre- 
cisam trabalhar muito próximos a designers para garantir que o que está 
sendo desenhado é realista e factível. Isso inclui, entre outras coisas, 
garantir que as entregas de front-end façam parte das entregas de design” 











Bons UX designers já se deram conta da importância de trazer o desen- 
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volvedor para as discussões criativas o quanto antes na timeline de um pro- 
jeto. Além de garantir mais clareza sobre aquilo que está sendo criado, essa 
aproximação entre as áreas também permite que o processo seja mais ágil, já 
que o time consegue partir para a etapa de prototipação da ideia mesmo antes 
de o layout estar pronto no Photoshop. “Test earlier, fail faster”, dizem por aí. 
E quanto antes você testa se uma solução funciona ou não, antes você pode 
começar a melhorá-la. 

O trabalho feito pelos desenvolvedores tem impacto direto na experiência 
do usuário, para o bem e para o mal. No decorrer do livro, você verá alguns 
exemplos de boas e más práticas de interface e mais situações em que a parce- 
ria entre designers e desenvolvedores pode render bons frutos. 
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CAPÍTULO 2 


Métodos e entregáveis de UX 


Quase nada daquilo que é desenhado ou projetado pelo UX designer acaba 
sendo “visto” pelo consumidor final. Todos os entregáveis e processos utiliza- 
dos em User Experience têm como objetivo facilitar a comunicação entre os 
membros do time, documentar decisões que foram tomadas em reuniões e 
brainstorms, colher insights sobre aquilo que os usuários finais precisam e/ou 
garantir que todos estejam alinhados a respeito do que está sendo criado. 

Os entregáveis produzidos por profissionais de UX variam bastante de 
acordo com o tipo de projeto, as expectativas do cliente, os objetivos de design 
e os membros do time envolvidos na hora de pensar nos detalhes do produto. 
Por se tratar de uma área multidisciplinar, os métodos e entregáveis utilizados 
e produzidos no dia a dia de um UX designer são fortemente influenciados 
pelos processos e métodos de outras áreas relacionadas. 

Definir a estratégia de design, gerar ideias através de brainstorms, plane- 
jar as funcionalidades e a evolução de um produto, testá-lo com usuários e 
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capturar insights através de pesquisa — esses são alguns exemplos de méto- 
dos que ajudam não apenas o UX designer, mas todos os membros do time, 
a desenhar produtos que sejam realmente relevantes para as pessoas. 

Nem todos os métodos listados aqui são utilizados em todos os projetos. 
Se você não trabalha diretamente com UX, acaba conhecendo apenas dois ou 
três métodos mais comuns, que se materializam em entregáveis como Wire- 
frames, Sitemaps e Personas. Conhecer esses métodos e saber quala hora certa 
de usar cada um deles é uma das habilidades mais procuradas em profission- 
ais de UX no mercado. 

A ideia aqui não é fazer uma análise aprofundada sobre cada um dos 
métodos. No final do capítulo há um link caso você tenha interesse em saber 


mais sobre eles. 


2.1 DEFINIÇÃO DA ESTRATÉGIA 


Nesse grupo entram os métodos utilizados no momento inicial do projeto, 
quando a estratégia está sendo definida e o time está preocupado em dire- 
cionar o produto para um lado ou para o outro. Ao contrário dos processos 
mais famosos, como wireframes e sitemaps, a preocupação aqui não é doc- 
umentar como a interface funciona, e sim embasar decisões mais abstratas 
sobre a “razão de ser” do produto. 


Blueprint 


Um mapa que mostra todos os pontos de contato entre consumidor e 
marca, bem como os processos internos necessários para que essa interação 
aconteça. É útil para visualizar o caminho que os consumidores percorrem 
em múltiplos canais (site, serviço de atendimento ao consumidor, loja física 
etc.) e para identificar oportunidades de melhoria. 
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Figura 2.1: Blueprint — Fonte: http://www.servicedesigntools.org/tools/35 


Consumer Journey Map 


Um diagrama que explora os múltiplos (e algumas vezes invisíveis) passos 
tomados pelo consumidor à medida que eles se engajam com o serviço. Per- 
mite que os designers definam as motivações e necessidades do consumidor 
nas várias etapas da jornada, criando soluções de design que sejam apropri- 
adas para cada uma delas. 
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Buying A No-Contract Mobile Phone 
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Figura 2.2: Consumer Journey Map — Fonte: http://blog.uxpin.com/2202/ 
designing-an-online-store-its-all-about-the-side-doors/ 


User Stories 


Um detalhamento de cada tarefa que o usuário deseja cumprir ao intera- 
gir com o produto. Bom para relembrar o time das motivações que levam o 
público-alvo a usar cada uma das funcionalidades do produto, assim como o 


caminho que os usuários percorrerão para fazê-lo. 
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Situation Motivation Expected Outcome 


Figura 2.3: User Stories — Fonte: https://medium.com/the-job-to-be-done/ 


Personas 


Um retrato do publico-alvo que destaca dados demograficos, comporta- 
mentos, necessidades e motivações através da criação de um personagem fic- 
cional baseado em insights extraídos de pesquisa. Personas fazem com que 
os designers e desenvolvedores criem empatia com os consumidores durante 
o processo de design. 
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Figura 2.4: Personas — Fonte: http://uxmag.com/articles/ 
personas-the-foundation-of-a-great-user-experience 
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Ecossistema 


Uma visualização em mapa das propriedades digitais da marca, das 
conexões entre elas e de sua função na estratégia de marketing. O ecossis- 
tema dá insights valiosos sobre como aproveitar as propriedades que a marca 
possui (e as novas que estão sendo criadas) para atingir os objetivos de negó- 
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Figura 2.5: Ecossistema — Fonte: http://hfiuxcentral.ning.com/forum/topics/ 
new- white- paper- kindle- fire-solid- proof-that- usability-is-no 


Análise competitiva 


Uma análise extensa dos produtos concorrentes que mapeia as funcional- 
idades existentes em cada um deles de forma comparativa. Ajuda a entender 
os padrões que estão sendo criados na indústria e a identificar oportunidades 


de inovar em determinado mercado. 
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One Big Fie 


Feature comparison table 1 





Figura 2.6: Análise competitiva — Fonte: http://www.onebigfield.co.uk/ 
clients/tyneside-cinema-ux- re- design-of- digital-offering/ 


Proposição de valor 


Um método redutivo nos estágios iniciais da definição do produto que 
mapeia seus aspectos principais: o que o produto é, para quem ele foi criado 
e como/quando ele será usado. Ajuda o time a afunilar as opções e a criar 
consenso sobre o produto que eles estão prestes a desenhar. 
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Value Proposition 


First Sentence - Value of the Offering 


Target Customer 


Statement of the Need or Opportunity 


Product/Service Category 
our (product/service name) is ... 


Statement of Benefit 


Second Sentence — Positioning the Value 


Primary Competitive Alternative 
Unlike ... 

Statement of Primary Diffenentiaror 
our product... 

Proof that Benefits can be Delivered 


because of our... 





Figura 2.7: Proposição de valor — Fonte: http://www.goldsbrough.biz/ 
value- proposition/ 


Entrevistas com Stakeholders 


Roteiros de entrevista com os principais stakeholders (as partes envolvi- 
das) de um projeto, tanto internos quanto externos a empresa, para coletar 
insights sobre os seus objetivos. Ajudam a priorizar as funcionalidades e a 
definir as métricas de sucesso do projeto. 


Key Performance Indicators (KPIs) 


Critérios preestabelecidos que ajudam a medir o sucesso do produto em 
relação à estratégia, para garantir que o produto atinja o resultado esperado. 
KPIs ajudam nas decisões de design que são tomadas no meio do caminho e 
também a medir resultados do trabalho de UX Design. 
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2.2 GERAÇÃO DE IDEIAS 


Esse grupo de métodos é utilizado durante a etapa criativa do projeto. Eles 
ajudam a coletar as ideias de todos os membros do time e a garantir que eles 
estejam alinhados em relação ao que o produto está começando a se tornar. 


Brainstorming 


O processo coletivo de geração de ideias, sem restrições, que respondem 
a determinado brief criativo. Ajuda o time a visualizar uma grande variedade 
de soluções de design antes de efetivamente decidirem com qual opção eles 
seguirão em frente. 





dl | N 
A S 


Figura 2.8: Sessão de Brainstorm — Fonte: http://www.duarte.com/blog/ 


take-your-meetings-by-storm/ 


Moodboard 


Uma coleção de imagens e referências que eventualmente se transfor- 
marão no estilo visual do produto em questão. Ajuda os criativos a mostrarem 
para os clientes e para os colegas de time a linha visual que estão imaginando 
para o produto antes mesmo de abrirem o Photoshop e começarem a fazer o 
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layout. 


| HOMEN revi WARM 
à APPROACHABLE carp 





Figura 2.9: Moodboard — Fonte: http://clearleft.com/thinks/ 
visualdesignexplorations/ 


Storyboards 


Uma espécie de história em quadrinhos da série de ações que os consum- 
idores tomarão enquanto estão usando o produto. Traduzem funcionalidades 
de forma mais tangível, em situações reais do dia a dia, ajudando designers a 
criarem empatia com o consumidor enquanto já começam a ter uma ideia do 
escopo do produto. 
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Figura 2.10: Storyboard — Fonte: http://www.fabiangarzon.com/mobile_ 
deals 2010.html 


Fluxo do usuário 


Uma representação visual do fluxo do usuário para completar tarefas den- 
tro do produto. O usuário começa pela homepage, depois entra na página de 
um produto, depois vai até o carrinho de compras - e assim por diante. É 
a perspectiva do usuário sobre a organização do site, que ajuda a identificar 
quais passos precisam ser melhorados ou redesenhados. 
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JE 


Figura 2.11: Fluxo do usuário — Fonte: http://wireframes.linowski.ca/2010/ 
o4/grand-narratives-play-points/ 


Análise de tarefas 


Um detalhamento das informações e ações necessárias para que o usuário 
complete uma tarefa. Ajuda designers e desenvolvedores a entenderem o sis- 
tema atual e como a informação transita dentro dele. Também ajuda a dis- 
tribuir as tarefas corretamente no novo produto que está sendo desenhado. 


Taxonomia 


Uma exploração em torno das múltiplas formas de categorizar conteúdo 
e informação: como as editorias em um site de notícias ou as categorias de 
produtos em um e-commerce, por exemplo. Contribui para que os designers 
definam a estrutura de conteúdo e rótulos que ajudarão o usuário a se movi- 
mentar pelo site. 


2.3 PLANEJAMENTO DO PRODUTO 


Esses são alguns dos métodos usados quando, passada a etapa de geração de 
ideias, chega a hora de planejar e desenhar o produto em questão. 
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Auditoria de conteúdo 


É a atividade de listar todo o conteúdo disponível em um site. A lista 
será utilizada em várias etapas do projeto, ajudando a enxergar sua totalidade, 
definir a estratégia de conteúdo e a averiguar os detalhes de cada uma das 
páginas. 


Análise heurística 


Uma análise minuciosa de um produto que destaca as boas e más práti- 
cas de UX, usando princípios conhecidos de Design de Interação como guia. 
Ajuda a visualizar o estado atual do sistema em matéria de usabilidade, efi- 
ciência e eficácia da experiência. 





100% 
Accessibility < , Task Orientation 
i / 


Page Layout & Visual Design Pad A __— Navigation & IA 
~ 


T 





Help, Feedback & Errar — 
Tolerance 





Writing & Content Quality 








Figura 2.12: Análise heurística — Fonte: http://www.smashingmagazine. 
com/2011/12/16/a- guide- to- heuristic- website-reviews/ 


Sitemap 


Um dos métodos mais conhecidos de UX. Consiste em um diagrama das 
paginas de um site organizadas hierarquicamente. Ajuda a visualizar a estru- 
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tura básica e a navegação entre as diferentes partes do sistema. 





ceq U itas Education Plus User Experience: Site Map 
Privacy 
Log In Terms Poli 
| (Modal) (Modal) | (Modal) 


What's Education 
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Convenience 


(or alternate static 





























Get a Loan 
Step 1: Sign Up 











Get a Loan à ae 
| | | | sopiconaa | | Raion 
Dashboard | PEELE ECNE A Manage Account: Info page?) 
A, | (authenticated user H fe Si H Change Contact 
home page) | Change pá | Info 
| 
L = 
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J Redirect (is this a 
Ra Š ai Password 
E EEPO en Reset Email Reset Password 
interstitial Change Email sent to User 
pages?) 
|] HERE E, 
y > 
Email Address 
Grange Emai e se 
sent to User J 
Aequitas/ASFG: Education Plus User Experience Site Map: v2 - Prepared by Wire Creative - 11.8.12 2 





Figura 2.13: Sitemap — Fonte: http://www.mattmairlowery.com/portfolio/ 
educationplus- portal/ 


Roadmap de funcionalidades 


É o plano de evolução do produto, com as funcionalidades já priorizadas. 
Pode ser uma planilha, um diagrama ou uma série de post-its organizados 


sobre um painel. Ajuda a compartilhar a visão estratégica com o time e a 


enxergar o caminho necessário para se chegar até lá. 
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"Logged effort” to the feature grid INTERNAL] Active user 
page @ © © viewed billina page Adi asa lat taxiing 4 


Figura 2.14: Roadmap de funcionalidades — Fonte: http://www.aha.io/ 
product/features/publish 


Cenários e casos de uso 


Uma lista exaustiva dos cenários possíveis enquanto os usuários estão in- 
teragindo com o produto: logado, não-logado, primeira visita etc. Ajuda a 
garantir que todas as ações são possíveis dentro do sistema, assim como visu- 
alizar como ele se comporta em cada um dos cenários listados. 


Análise de métricas 


Análise dos números fornecidos por alguma ferramenta de métricas que 
dão insights sobre como os usuários interagem com o produto: número de 
cliques, tempo de navegação, palavras-chave buscadas etc. Os números aju- 
dam a descobrir insights valiosos sobre o comportamento dos consumidores, 
que muitas vezes não podem ser capturados em um teste de usabilidade. 
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2.4 PESQUISA E VALIDAÇÃO 

São métodos utilizados pelo UX designer para entender como o consumidor 
pensa, o que espera do produto e como interage com ele. 

Focus Group 


Um painel de discussão com vários usuários sobre determinado assunto 
ou questão. Ajuda a entender os sentimentos das pessoas, suas opiniões e até 
a linguagem que utilizam ao falarem sobre o produto. Útil quando o time não 


está muito familiarizado com o público-alvo do produto. 





Figura 215: Sessão de Focus Group — Fonte: http://www. 
quest-research-solutions.co.uk/ 


Pesquisa quantitativa 


Questões que produzem um número como resultado. É uma forma rápida 
e simples de medir a satisfação dos consumidores e coletar feedback sobre o 
produto. As pesquisas quantitativas podem apontar a necessidade de outro 
tipo de pesquisa em profundidade. 
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Please indicate how satisfied you were with the following aspects of the seminar: 
(Using a scale of 1 to 5, where 1 is Very Poor and 5 is excellent) 


Venue O O O 

Opening Address 
Morning Presentation 
Lunch Facilities 


Afternoon Presentation 


Q&A Session 


0000000 
000000 
elelelelele 
eleljelelele 
elelelelelele 


Post seminar social event 





Figura 2.16: Formulário de pesquisa quantitativa — Fonte: http://www. 
surveygalaxy.com/default.asp?¢m=7&id=o009&dir=/articles/&lang=en-GB 


Teste de usabilidade 


Uma entrevista um-a-um com o consumidor, na qual pede-se a ele que 
realize uma série de tarefas em um protótipo ou mesmo no produto final. 
À medida que o consumidor interage com o produto, o pesquisador faz an- 
otações sobre seu comportamento e suas opiniões. Ajuda a validar fluxos, 
layouts e funcionalidades. 
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Figura 2.17: Sessão de teste de usabilidade — 
Fonte: http://curveagency.com/blog/user-experience/ 
responsive-wireframe-usability-testing-tips-and-tricks 


Card Sorting 


Uma técnica que consiste em pedir aos usuários que agrupem conteúdos 
e funcionalidades em categorias. Dá inputs valiosos ao time sobre hierarquia 
de conteúdo, organização e taxonomia. 


Teste A/B 


Trata-se de oferecer duas versões diferentes do produto para diferentes 
usuários e ver qual delas tem melhores resultados. Ótimo para melhorar a 
taxa de conversão de funis de compra, landing pages ou formulários de cadas- 
tro. 
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Eyetracking 


Uma tecnologia que consegue analisar o movimento dos olhos do usuário 
à medida que ele interage com o produto. Dá informações sobre as partes da 
interface que mais interessam ao usuário e também sobre qual a ordem de 


leitura dos elementos da tela. 


Análise de acessibilidade 


Um estudo que mede se o site pode ser usado por qualquer pessoa, in- 
cluindo usuários com necessidades especiais. 


2.5 DESENHO DE INTERFACES 


Esses são os entregáveis mais comuns de UX Design: aqueles que documen- 
tam como determinada tela deve funcionar. São ótimas ferramentas para co- 
municar ideias com outros membros do time, clientes e todas as partes en- 
volvidas no projeto. 


Sketches 


Uma forma rápida de rabiscar uma nova interface usando papel e caneta. 
Sketches podem ser muito úteis para validar rapidamente conceitos de pro- 
dutos e ideias de design com os outros membros da equipe e com usuários. 
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Figura 2.18: Sketches — Fonte: http://www.smashingmagazine.com/2013/06/ 
24/sketching-for-better- mobile- experiences/ 


Wireframes 


Um guia visual que representa a estrutura da pagina, bem como sua hier- 
arquia e os principais elementos que a compõem. Útil para discutir ideias com 
o time e com os clientes, e também para informar o trabalho dos diretores de 
arte e desenvolvedores. 
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Figura 2.19: Wireframe — Fonte: http://fundamentals.melissacabral.com/ 
evening-example-information-architecture-and-wireframe/ 


Protótipos 


Um protótipo é uma simulação da navegação e das funcionalidades de 
um site, composto normalmente por wireframes clicáveis ou layouts. É uma 
forma rápida de validar e testar um produto antes de desenvolvê-lo do começo 
ao fim. 


Biblioteca de padrões 


Uma lista prática com exemplos (e às vezes código) dos padrões de inter- 
ação que serão usados em todo o site. Não só ajuda a manter o design consis- 


tente em diferentes telas, mas também facilita a vida dos desenvolvedores na 


hora de implementar os elementos. 
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A lista é bastante ampla e mesmo profissionais especializados acabam não 
dominando ou usando todos esses métodos com frequência. No decorrer do 
livro, você verá em mais profundidade alguns deles: wireframes, protótipos, 
sketches, bibliotecas de padrões, testes de usabilidade e testes A/B. 





GOSTA DESSE ASSUNTO? 


Se você se interessa em conhecer mais sobre os métodos de UX, acesse 
http://fabricio.nu/metodos para ver mais links e exemplos. 
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Wireframes, protótipos e 
rabiscoframes 


Wireframe é um desenho básico da estrutura de determinada interface que 
demonstra de forma simplificada como o produto final deverá funcionar. 


Casa do Código 





ES OD E: [EE TE E EEE 
What will be the 


Coin Toss sé | coin toss result? 


Make your prediction 
for the coin toss 
and win prizes 


Images_of the prizes 


Make my prediction Make my prediction 
(Time Loft 14:59) (Time Left 14:41) 





* User can drag their finger to flip the coin 
and switch between Heads and Tails. 


Figura 3.1: Wireframe do aplicativo Pocket Pass, da Metlife, que desenvolvi 
em 2010 


Normalmente, ele é feito em tons de cinza, sem imagens, e o maior ob- 
jetivo é organizar os elementos que entrarão na composição final do design. 
Esse tipo de documentação ajuda tanto os diretores de arte — a entenderem os 
elementos essenciais na hora de criar o layout - quanto os desenvolvedores 
- que, a partir do wireframe, já conseguem estimar o esforço de trabalho, 
começar a modelagem de dados e até a testar soluções de front-end que se 
adequem à solução proposta pelo UX designer. 

Pense no processo de construção de um prédio. Antes de começar a er- 
guer as paredes (e mesmo antes de comprar todo o material necessário para 
a construção), existe uma etapa de planejamento. É preciso entender o obje- 
tivo daquele espaço que será construído (exemplo: moradia), as funções que 
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as pessoas realizarão ali dentro (comer, dormir, socializar) e, a partir daí, criar 
as várias seções (cômodos) para as pessoas circularem. 





M.BEDROOM 


yxy 


BEDROOM 1 BEDROOM 2 


LULE 


oe x 93" 





UPPER LEVEL 
TOWNHOUSE #2,7,11 
TOWNHOUSE (REVERSED) #3,8,12 


Figura 3.2: Os wireframes até se parecem um pouco com a planta baixa usada 


por engenheiros e arquitetos 


Só quando está tudo definido, aprovado e testado, é que a construção 
começa efetivamente. No processo de construção de produtos digitais é a 
mesma coisa. 
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3.1 COMO NASCEM OS WIREFRAMES 


Para criar o wireframe de um produto, o UX designer costuma levar em conta 
varios fatores: 


e Os objetivos de negócios do cliente, que normalmente são passados no 
início do projeto em formato de briefing; 


e Os requisitos técnicos do sistema - seja um novo sistema ou um sistema 


legado; 


e O conceito criativo do produto, quando existe um time de criação en- 
volvido; 


e Os guidelines de branding e tom de voz da marca/empresa em questão; 
e As boas práticas conhecidas de usabilidade e navegação; 


e As possibilidades e limitações técnicas da plataforma onde o produto 
final será desenvolvido (HTML, CSS, JS, C++ etc.); 


e As possibilidades, limitações e boas práticas do hardware onde a inter- 
face será acessada (computadores desktop, smartphones, tablets, caixas 
eletrônicos etc.). 


Uma vez que todos esses requisitos são levantados, chega a hora de o UX 
designer colocar no papel uma primeira materialização do que se sabe sobre 
o produto. Durante o processo de desenho de um wireframe, o profissional 
de UX precisa fazer uma série de decisões que eventualmente informarão o 
layout do produto. 

Qual a primeira coisa que você quer que o usuário veja quando ele chegar 
na homepage do site? Que informações você precisa mostrar para que ele 
entenda do que se trata o seu produto? Como aproveitar a alta visibilidade da 
página inicial para mostrar conteúdo relevante para os visitantes? 
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Entre com sua conta Google 


CREATIVE 
SANDBOX ENTENDA O PROJETO PRODUTOS GOOGLE | IDEIAS RECEBIDAS 
Let your ideas play. 
ETIE 
434 ideias 








recebidas até agora 


DM9/DD8 Africa AgênciaClick F/Nazca Ogilvy AG2 AgênciaClick F/Nazca Ogilvy AG2 Ogilvy AG2 


A Google Box ja esta circulando: 


Google Box @ ] | i " ideias Felipe S.: Titulo da ideia 
DM9/DDB São Paulo Pal | Ar 


| recebidas lorem ipsum dolor sit... 


Figura 3.3: Wireframe do site Google Creative Sandbox, no qual trabalhei em 
2012 


Além do conteúdo das páginas, o UX designer precisa pensar também 
em um método de navegação que permitirá que o usuário navegue entre elas. 
Alguns sites ou aplicativos possuem menus fixos no topo, com link para todas 
(ou as principais) páginas. É o caso dos e-commerces ou sites institucionais, 
por exemplo. Já outros sites possuem um fluxo mais linear: há apenas uma (ou 
algumas) ações que o usuário pode tomar na primeira página, e dependendo 
dessa ação ele verá uma nova página, e outra, e outra. Para alguns sites faz 
sentido disponibilizar um campo de busca, para outros nem tanto. 

Determinados o conteúdo e a navegação, é preciso pensar também nas 
interações. Como a interface se comporta quando o usuário interage com 
ela? Há sempre uma troca de página? Ou algumas vezes as ações dos usuários 
revelarão novos conteúdos na mesma página? Há som? Há feedback para 
cada ação tomada? 
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No fim das contas, um documento de wireframe é a documentação de 
todas essas decisões de forma clara, que consiga ser interpretada por outros 
profissionais que também estão envolvidos no projeto. 


3.2 COMO INTERPRETAR UM WIREFRAME 


Se você trabalha com desenvolvimento de produtos e interfaces digitais, é 
provável que já tenha visto e usado wireframes no seu dia a dia. Mesmo em 
times em que não há um UX designer ou arquiteto de informação, outras pes- 
soas podem acabar ficando responsáveis por planejar os detalhes da interface 
antes de o diretor de arte abrir o Photoshop - seja o próprio desenvolvedor, 
um analista de especificação ou, às vezes, o próprio gerente de projetos. 

Ainda assim, muita gente tem dúvida sobre a real função de um wireframe 
e de como filtrar o que está sendo mostrado ali da maneira correta. 
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Step 4: Add toppings 





Pepperoni Italian Sausage Ham Bacon Cheddar Feta Black Oli 





KI PIZZA MAKER YOUR TIME 01'26"112 


Figura 3.4: Wireframe do aplicativo de iPad da Domino’, no qual trabalhei 
em 2011 


O que o wireframe mostra: 


* A hierarquia da interface. Elementos com mais peso visual no wire- 
frame indicam os elementos que devem ser priorizados pelo diretor de 
arte na hora de compor o layout final do produto. 


e Disposição das informações na tela. O wireframe normalmente traz 
uma sugestão inicial de como os elementos devem ser dispostos na in- 
terface para garantir a ordem de leitura adequada para o usuário. É 
claro que o diretor de arte pode propor mudanças na hora de compor 
o layout, mas a estrutura normalmente permanece a mesma. 


¢ Quantidade e tipo de conteúdo. Apesar de o wireframe usar textos e 
imagens de marcação, através dele já é possível visualizar quais os difer- 
entes atributos que aparecerão na interface. Por exemplo: na página de 
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uma notícia teremos o título, o subtítulo, o texto completo, de 3 a 5 
imagens, o nome do autor, a data de publicação e um espaço para co- 
mentários dos leitores. 


Menus e elementos de navegação. Os wireframes quase sempre con- 
têm uma sugestão de como o menu do site/aplicativo estará estrutu- 
rado: quais são os itens de menu, em qual ordem eles aparecem, como 


a navegação no menu funciona. 


Comportamento em vários tamanhos de tela. No caso de sites re- 
sponsivos ou mesmo aplicativos de smartphone que funcionem no 
modo retrato e paisagem, os wireframes podem ser usados para ex- 
plicar como o conteúdo da interface se adapta a diferentes tamanhos e 
orientações de tela. 


Requisitos de negócios e sistema. Como o UX designer leva em conta 
os requisitos passados pelo cliente e pelo time de desenvolvedores sobre 
como o sistema funciona, o wireframe já é uma representação apurada 
da funcionalidade do sistema. 


Variações e estados diferentes do sistema. O wireframe normalmente 
contém uma indicação de como uma mesma tela se comporta em difer- 
entes condições: quando o usuário está deslogado, quando está logado, 
quando acessa o site pela segunda vez, quando entrou no site através de 
um banner ou ponto de entrada específico, quando uma determinada 
listagem contém zero item, um item ou duzentos itens — e assim sucessi- 
vamente. Normalmente, desenvolvedores e designers trabalham juntos 
para definir quais são as principais variações e estados do sistema que 
precisam ser documentados pelo wireframe. 
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Figura 3.5: Comparativo entre wireframe e layout final de um site 


O que o wireframe não mostra: 


¢ O layout final. Obviamente, o wireframe não é um espelho do produto 
final. Botões podem mudar de posição, links podem virar botões e vice- 
versa, imagens podem acabar com tamanho ou proporções diferentes 
no layout final, a ordem dos elementos e a forma como estão agrupados 
podem mudar. 


e A identidade visual da marca. Detalhes como cores, tipografia, logo 
e quaisquer outros elementos de branding serão revisados pelo diretor 
de arte. 


e Texto e conteúdo final. Depois do wireframe terminado, normalmente 
um redator é quem vai trabalhar nos rótulos e textos finais da interface. 
Apesar de o UX designer já fazer uma sugestão de qual o tamanho re- 
comendado dos textos, é possível que muita coisa mude na hora de 
popular a interface com o conteúdo revisado. 
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¢ Todos os casos de uso do produto. Como dito anteriormente, o wire- 
frame normalmente considera os principais casos de uso e reflete vari- 
ações e cenários mais comuns que os usuários encontrarão no pro- 
duto. Mas existe a necessidade de um olhar mais apurado, normal- 
mente feito por um analista de especificação ou desenvolvedor, sobre 
todos os cenários que podem acontecer quando as pessoas forem usar 
o produto. Esses cenários podem ser representados por uma nova ro- 
dada de wireframes, mas em muitos casos apenas uma discussão entre 
designers e desenvolvedores é suficiente para decidir como a interface 
se comporta nesses casos. 


3.3 AS VANTAGENS DE USAR WIREFRAMES NO PRO- 
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Wireframes existem para evitar trabalho desnecessário. É quase como um 
rascunho do layout final. Como todo rascunho, é criado para que as pessoas 
consigam dar feedback sobre ele, para que ele então possa ser ajustado e ir 
para as outras áreas envolvidas no projeto. 


Um wireframe nunca está 100% pronto. Justamente por ser um docu- 
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mento focado em colaboração e discussão, é importante que o UX designer o 
compartilhe com todos os membros do time (desenvolvedores, diretores de 
arte, gerente de projetos, cliente) e também com o usuário final. Muitas vezes, 
os wireframes já são suficientes para mostrar a interface para um usuário e 
colher feedback sobre os pontos fortes e fracos da solução proposta, antes 
mesmo de o layout final ser criado pelo diretor de arte. 

A principal vantagem de usar wireframes em vez de layouts no Photo- 
shop é a facilidade e agilidade em fazer ajustes, mudar tudo ou começar outra 
vez. É muito mais rápido e faz muito mais sentido. A própria aparência “de 
rascunho” dos wireframes (feito em tons de cinza, sem imagens ou conteúdo 
final) colabora para que as pessoas se sintam mais à vontade para dar feed- 
back e sugerir melhorias. Afinal, é muito mais fácil você criticar um trabalho 
que foi feito rapidamente em poucas horas do que você pedir para um dire- 
tor de arte, que gastou dias polindo a interface, pixel a pixel, fazer grandes 
alterações. 

Muitos gestores de projetos preferem esperar para que um wireframe es- 
teja 100% aprovado pelo cliente e por todas as áreas envolvidas antes de passar 
a documentação adiante para o diretor de arte e o programador começarem 
o trabalho. É o tal de processo de cascata, que mitiga o risco de refações e 
alterações após o momento em que o documento foi aprovado — apesar de 
não eliminar os ajustes de última hora pedidos pelo cliente ou causados por 
limitações técnicas na hora de implementar o produto. 

A vantagem é que os programadores (tanto front-end quanto back-end) 
já podem começar seu trabalho após a definição dos wireframes. Por mais que 
o programador front-end não tenha o layout final, ele já pode ir pensando na 
arquitetura das telas, estrutura de pastas, arquivos de estilo e outras definições 
macro. Por outro lado, o programador back-end consegue entender a mod- 
elagem de dados necessária, a infraestrutura, os tipos de requisição e tráfego 
de informações que acontecerão no sistema. 


3.4 ALTERNATIVAS AOS WIREFRAMES 


Wireframes são uma ótima ferramenta na hora de demonstrar como uma 


interface deve funcionar e quais informações estão contidas nela. Além disso, 
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são muito mais rápidos de serem produzidos (e alterados) do que os layouts 
em Photoshop. 

Durante muitos anos, o wireframe funcionou como peça essencial em 
projetos digitais de médio e grande porte. É a documentação em que todas 
as áreas se baseiam na hora de iniciar seus esforços - seja o diretor de arte, o 
programador front-end, back-end ou o redator. 

No entanto, nos últimos anos surgiram outras ferramentas e entregáveis 
que conseguem cumprir o mesmo papel que os wireframes em muito menos 
tempo e com um pensamento ainda mais ágil. 

Até alguns anos atrás, em grandes empresas, era muito comum que em 
um projeto fossem desenvolvidos wireframes, layouts e depois protótipos 
navegáveis de uma determinada interface. Um processo de trabalho em cas- 
cata, em que cada entrega é validada com o cliente para que a etapa seguinte se 
inicie. Essa é uma forma segura de garantir que o visual designer só começará 
atrabalhar quando o wireframe tiver sido 100% aprovado, evitando horas des- 
perdiçadas em retrabalho. 

Acontece que, no exemplo citado, o time acaba desenvolvendo 3 protóti- 
pos sequenciais. O wireframe nada mais é do que um protótipo, uma simu- 
lação de como a interface deve funcionar. O layout em jpg também é um 
protótipo, uma segunda simulação da mesma interface. E quando o UX de- 
signer utiliza uma ferramenta de criação de layouts clicáveis ou protótipos 
navegáveis, ele acaba criando um terceiro protótipo da mesma tela. 

O pior: nada disso é aproveitado na hora de os desenvolvedores es- 
creverem o código final. Essa documentação toda criada pelos designers 
acaba sendo usado apenas como referência para os desenvolvedores. E alguns 
projetos exigem um método mais ágil do que esse pensamento em cascata. 

Foi com esse obstáculo em vista que alguns times de UX designers no 
Brasil e no mundo começaram a testar outras alternativas para agilizar essa 
etapa do projeto. 


Entre as alternativas mais comuns aos wireframes estáticos, estão: 


Wireframes colaborativos entre todos do time 


Em vez de o UX designer ou arquiteto de informação desenhar os wire- 
frames sozinho, sentado em sua mesa, é possível pensar em um método mais 
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colaborativo para a criação dos mesmos: envolver o diretor de arte, o gerente 
de projetos, o redator, o front-end developer, o back-end developer e o plane- 
jador e colocar todos juntos em uma sala de reunião para montarem as telas 


juntos - com papel, post-its e caneta. 





Cada um coloca seu ponto de vista em cada decisão tomada. Funciona 
muito bem, especialmente para produtos com poucas telas. Em poucas 
sessões de uma ou duas horas cada, é possível definir o fluxo principal do 
site a várias mãos. A melhor parte é que, saindo da reunião, todos já sabem 
o que o site deve conter e já podem começar a trabalhar no mesmo dia, sem 
precisar esperar que o UX designer finalize um deck de wireframes de várias 
páginas para isso. 


Desenhos no papel + guias de estilos 


Em alguns casos específicos, fica mais fácil desenhar em papel o conteúdo 
da tela e já partir para o Photoshop com o diretor de arte. A diferença é que, 
em vez de fazer o layout tela a tela, o diretor de arte cria apenas os elementos- 
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chave da interface, separadamente, como em um styleguide. O programador 
front-end junta as duas coisas (o sketch com o styleguide), direto no código. 
Isso torna a etapa de UX e arquitetura de informação muito mais curta, e 
também simplifica o trabalho do diretor de arte. Mas é um método que não 
funciona muito bem caso o site tenha um sistema back-end muito complexo 
(como um internet banking, por exemplo); algumas regras precisam ser doc- 
umentadas em mais detalhes para os desenvolvedores. 


Protótipos navegáveis 


A opção de criar protótipos navegáveis pode ser feita usando alguma fer- 
ramenta de wireframing que permita criar links entre uma tela e outra. No 
final, em vez de um wireframe estático, o time consegue navegar por um pro- 
tótipo clicável que simula, em variados níveis de fidelidade, como a interface 
final funcionará. 
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Figura 3.6: Exemplo de protótipo navegável criado pelo UX designer 


A vantagem dessa alternativa é que fica muito mais fácil para o cliente en- 
tender como o produto irá funcionar, sem precisar percorrer extensas pági- 
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nas de wireframes estáticos. A parte ruim é que isso não descarta o trabalho 
inicial de pensar na AI da página (e compor o layout, caso você queira que 
o mockup tenha o visual final). Outro ponto negativo é que, dependendo da 
linguagem técnica em que esse protótipo foi criado, o código acaba não sendo 
aproveitado pelos desenvolvedores na hora de colocar a mão na massa e criar 
efetivamente o produto. 


UX designer aprendendo a programar 


Essa é uma ótima alternativa, para que o próprio UX designer monte o 
wireframe ou protótipo usando HTML e CSS. Muita gente tem falado hoje 
em dia sobre “desenhar no próprio browser”, em vez de desenhar a interface 
primeiro no Photoshop. A parte boa é que o protótipo fica muito mais real- 
ista e o desenvolvedor consegue aproveitar uma parte do código no futuro. 
A parte ruim é o risco de o UX designer ficar muito entretido nas linhas de 
código e ter pouco tempo para se afastar da execução, ter uma visão holís- 
tica da experiência e advogar mais pelo usuário do que pela interface - que, 
convenhamos, é o que o UX faz de melhor. 


UX e desenvolvedor front-end criando protótipos juntos 


Esse parece ser um dos melhores caminhos para onde os times estão ru- 
mando - ou, pelo menos, o caminho que tem funcionado para mais tipos de 
projetos. Cria-se uma dupla de UX designer e desenvolvedor e eles desenham 
e montam juntos o protótipo. Tudo é feito sem muita necessidade de docu- 
mentação, já que eles sentam lado a lado e discutem em tempo real as decisões 
de design que precisam ser feitas. Como é o próprio desenvolvedor front-end 
que está escrevendo o código, 100% dele é reaproveitado no produto final - 
ele só precisa adicionar o estilo depois que o visual designer tiver definido o 
styleguide no Photoshop. 

Uma das principais motivações nesse processo de reinventar o fluxo de 
trabalho de um time de Design é a constatação de que wireframes estáticos 
não têm tido um bom desempenho em certos tipos de projeto. Entre os prin- 
cipais problemas de usar somente wireframes estáticos, estão: 


e Wireframes estáticos não são muito bons em representar um design 
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responsivo, a não ser que você desenhe 5 versões diferentes dele ou mais 
(uma para cada tamanho de tela); 


e Wireframes muitas vezes tentam simular um comportamento que já é 
nativo do HTML e do CSS (ou da linguagem de programação na qual 
o produto final será criado); 


e Alterações no wireframe de alta fidelidade podem levar mais tempo 
para serem feitas do que no código, por mais que você use elementos- 
mestres e outras táticas. 


É claro que não existe uma resposta definitiva para a melhor alternativa 
aos wireframes. Possivelmente, eles nunca serão completamente substituídos, 
já que funcionam e continuarão funcionando muito bem para determinados 
projetos, times e métodos de trabalho. Se você está começando agora a se 
aventurar pelo mundo de User Experience, os wireframes continuam sendo 
o caminho mais seguro e razoável de documentar o seu trabalho. 

Cada uma dessas alternativas listadas anteriormente tem seus prós e con- 
tras. Cabe ao UX designer e ao desenvolvedor entenderem a ferramenta que 
funciona melhor para aquele projeto, para aquele prazo, para aquele time e 
para aquele cliente. É essa capacidade de se adaptar a diferentes contextos 
que diferencia os melhores profissionais de UX no mercado. 


3.5 AS VANTAGENS DOS PROTÓTIPOS 


Protótipos são versões interativas dos wireframes, onde é possível clicar ou 
interagir com algumas partes da tela para simular como será o seu funciona- 
mento -mesmo que ainda a funcionalidade ainda não tenha sido implemen- 
tada corretamente. É como se fosse um rascunho do trabalho que depois será 
realizado pelo desenvolvedor front-end. 

Como mencionado anteriormente, a criação desse tipo de protótipo 
navegável pode ter algumas vantagens em relação aos wireframes estáticos: 


Experiência de navegação 


A possibilidade de navegar pelo protótipo faz muita diferença na hora de 
“sentir” como o produto final funcionará. Ele simula o que acontece a cada 
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clique, a cada interação — resultado esse, que só seria possível depois que o 
projeto já tivesse sido programado por um desenvolvedor front-end. 


Documentos mais enxutos 


Diferente dos wireframes estáticos, os protótipos permitem que você rep- 
resente vários estados diferentes da interface em uma mesma página. Quando 
o UX designer cria um wireframe em PDF, cada novo elemento que surge na 
tela (mesmo que ele não represente uma página separada na estrutura do site) 
precisa ser documentado em uma página diferente do documento. Já os pro- 
tótipos permitem que você veja os elementos em funcionamento no próprio 
contexto onde eles aparecem, fazendo com que o documento final seja bem 
mais enxuto do que os extensos PDFs com wireframes estáticos. 


Apresentação para clientes 


Designers e desenvolvedores estão acostumados a receber um wireframe 
em PDF e abstrair o fato de que aquele documento é apenas uma represen- 
tação de como a interface irá funcionar. Com os anos de profissão, eles se 
acostumam a conseguir visualizar como aquele wireframe se materializará 
uma vez que o produto começar a ser construído na linguagem final - seja 
um site em HTML, um aplicativo para iOS ou um game. 

Mas muitos clientes não estão acostumados a lidar com wireframes no 
dia a dia. Protótipos contribuem para que os clientes entendam melhor a 
proposta e agilizam a aprovação do trabalho. Nas reuniões de apresentação de 
trabalho, basta o UX designer pilotar a navegação e interagir com o protótipo 
na frente do cliente para que ele entenda como a interface funciona. 


Ferramentas de fácil aprendizado 


Existem várias ferramentas disponíveis no mercado para se criar protóti- 
pos navegáveis. Além de não precisar conhecer nada sobre HTML ou CSS 
para prototipar um site usando esses softwares, por exemplo, você consegue 
aprender a dominar os recursos da ferramenta já no primeiro dia de trabalho. 
Normalmente, as empresas que fornecem esses softwares de prototipagem 
também disponibilizam tutoriais e dicas em seus sites. 
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No Brasil, uma das ferramentas mais populares de prototipação é o Axure, 
mas há uma porção delas — cada uma com um uso específico. 





GOSTA DESSE ASSUNTO? 


Se você tem interesse em saber mais, acesse http://fabricio.nu/ 
ferramentas para ver mais ferramentas de prototipação e wireframe. 











Designers e programadores menos irritados 


Abrir um documento de wireframe em PDF e percorrer todas as pági- 
nas lendo todas as anotações escritas pelo UX designer pode ser um tra- 
balho maçante. Quando o documento é muito extenso, há ainda o risco de 
os diretores de arte, programadores e clientes não se atentarem aos detalhes e 
acabarem negligenciando alguns pontos importantes. Os protótipos acabam 
deixando a experiência de navegar pelo trabalho do UX designer mais inter- 
ativa, menos cansativa e mais próxima da realidade. 


Aprender enquanto desenha 


Para o próprio UX designer, a prototipagem é um aprendizado interes- 
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santíssimo de design. À medida que você vai gerando o protótipo e testando 
aquilo que acabou de desenhar, fica mais fácil visualizar as falhas e corrigi- 
las no decorrer do processo. Quando você desenha um menu, por exem- 
plo, já consegue testar se o menu está “usavel” na mesma hora - algo que é 
quase impossível prever quando você está criando wireframes estáticos e não- 
interativos. 


Mais facilidade para testar com usuários 


Com o protótipo em mãos, é muito mais rápido conseguir colocá-lo na 
frente de usuários reais para testar o produto. Em alguns casos, você pode 
até mandar o link do protótipo para alguém testar remotamente, colhendo 
feedback quase imediato sobre aquilo que está sendo desenhado. 


3.6 COMO DECIDIR ENTRE PROTÓTIPOS E WIRE- 
FRAMES 


Nos últimos anos, os times de UX design passaram a incorporar protótipos 
em seu fluxo de trabalho com muito mais frequência. Apesar de os wireframes 
estáticos continuarem firmes e fortes, os protótipos surgem para responder a 
algumas necessidades que se tornaram essenciais no dia a dia do UX designer. 
Sejam os protótipos criados diretamente em HTML + CSS + JS ou por 
uma ferramenta de prototipagem, como explicado anteriormente, os obje- 
tivos da criação de protótipos funcionais continuam os mesmos: representar 
links entre telas, detalhar as interações entre um estado e outro do sistema, 
ser mais fiel na representação da interface e facilitar os testes com usuários. 
Wireframes e protótipos são todos membros de uma mesma família. En- 
quanto os wireframes representam a interface com menor fidelidade, os pro- 
tótipos representam interfaces de forma muito mais próxima do produto final. 


Qual critério usar para decidir entre um e outro 


Na verdade, é no plural: critérios. Segundo este artigo do UsabilityGeek 
(http://usabilitygeek.com/when-to-prototype-when-to-wireframe-fidelity) , 
existem vários aspectos que devem ser levados em conta nessa decisão. Veja a 


59 


3.6. Como decidir entre protótipos e wireframes Casa do Código 





seguir uma versão adaptada da lista, mostrando os critérios que mais pesam 
na hora de decidir entre wireframes e protótipos funcionais. 

Mais importante do que tentar dizer se protótipos interativos são mel- 
hores ou piores do que wireframes estáticos, o objetivo desta lista é somente 
clarear e relembrar pontos que podem passar batidos na hora de fazer essa 
escolha. Parar um momento antes de o projeto iniciar para fazer essa decisão 
é muito melhor do que simplesmente sair fazendo um ou outro e depois se 
arrepender no meio do caminho. 


Budget 


Primeiro, é importante deixar de lado a afirmação cega que diz que pro- 
tótipos gastam mais horas para serem feitos do que wireframes estáticos. 


Depois, é preciso levar em conta: 


e O software que você pretende usar para criar cada um deles; 
e O profissional que irá fazê-lo; 
e A habilidade do profissional com tal ferramenta; 


e O nível de detalhamento que você quer que o protótipo tenha. 


A partir do momento em que você tem visibilidade desses quatro aspec- 
tos, o próximo passo é estimar as horas necessárias. Já tive experiências óti- 
mas em que um protótipo era criado diretamente no código por uma dupla 
de UX designer + desenvolvedor front-end, em muito menos horas investidas 
do que se o designer estivesse criando sozinho. Também já vi casos nos quais, 
na ausência de alguém com habilidade em criação de protótipos, a melhor 
solução era documentar wireframes estáticos ilustrando passo a passo como 
a interação acontece. As duas opções podem funcionar bem, desde que todos 
do time estejam cientes de qual será utilizada. 


Fase do projeto 


Um outro aspecto para levar em conta é o momento em que o projeto se 
encontra. 
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* Momento de geração de conceitos: se o time deseja criar várias versões 
diferentes de uma mesma ideia para testar qual funciona melhor, wire- 
frames de baixa fidelidade podem garantir mais rapidez e “desapego” à 
solução criada. Isso pode ser feito até mesmo usando papel e caneta. 


* Momento de validação de conceito: se o time já optou por um cam- 
inho criativo e agora deseja testar a fundo se ele funciona, protótipos 
de alta fidelidade tendem a ser mais efetivos na hora de validar com 


usuários reais. 


e Momento de produção: se o produto ja está sendo desenvolvido, a 
decisão fica, na maior parte das vezes, a critério do time de progra- 
madores. Qual o melhor jeito, para eles, de receber a documentação? 
Alta ou baixa fidelidade? Estático ou clicável? 


Complexidade da interface 
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Quando o produto que está sendo criado depende fortemente de uma in- 
teração específica (exemplo: arrastar o bonequinho do Google Maps sobre 
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uma rua para ativar o Street View), talvez o melhor jeito de saber se essa in- 
teração funciona seja criando um protótipo funcional. Quando você tenta 
documentar esse mesmo tipo de interação através de wireframes estáticos, é 
preciso ser muito mais detalhista com o que acontece em cada um dos passos 
(seja através de uma descrição em texto, seja quebrando o desenho da inter- 
ação em vários quadros). 

Mas se o trabalho é puramente de arquitetura de informação - organizar 
conteúdo, navegação e mostrar hierarquia em cada tela — talvez o wireframe 
estático acabe sendo mais efetivo e simples de ser desenvolvido. 

Leve em conta também se o design é responsivo ou não. Dependendo da 
sua escolha de ferramenta, serão necessárias horas a mais ou a menos para 
representar como a interface se adapta para diferentes resoluções de tela. 


Sofisticação da audiência 


Para quem a documentação será apresentada? 

Normalmente, o público interno da agência ou empresa onde você tra- 
balha costuma ter mais facilidade de abstrair wireframes estáticos e entender 
como as interações funcionam sem a necessidade de um protótipo realista da 
interface. 

Mas a coisa pode mudar um pouco de figura no caso de clientes (depen- 
dendo da maturidade e experiência que eles têm em lidar com documentação 
de UX) e de usuários finais (algumas pessoas podem ter dificuldade de enten- 
der que aquele desenho que você está mostrando para eles é a representação 
de uma interface digital animada e interativa). 

E se o objetivo é encantar o cliente para convencê-lo a comprar o projeto, 
certamente os protótipos causam melhor impressão. 


Ferramentas híbridas 


Uma outra saída interessante é utilizar uma ferramenta híbrida, que per- 
mite criar tanto wireframes estáticos quanto protótipos interativos. O Axure é 
um bom exemplo: você só adiciona links e interações entre as telas se quiser. 
Isso alivia o peso dessa “decisão” entre wireframes estáticos e protótipos e 
ainda permite que o time mude de um trilho para o outro no decorrer do 
projeto caso necessário. 
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3.7 COMUNICANDO IDEIAS COM RABISCOFRAMES 


Uho consee this update? view Ay By List 
ERR ART | 


Quick Fad 











A expressão “rabiscoframe” é uma mistura bem humorada do termo sketch 
(esboço, rabisco) com o já conhecido termo wireframe. Em muitos times de 
desenvolvimento já se tornou parte essencial do processo de desenho de inter- 
faces, especialmente naquele momento do projeto em que as ideias começam 
a tomar forma e sair do etéreo mundo do PowerPoint. 
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“Sketching permite que exploremos o problema e definamos a solução 
ao mesmo tempo. A técnica ajuda a definir melhor o nosso entendimento 
do problema, ao mesmo tempo em que nos ajuda a pensar nas possíveis 
soluções. 

Enquanto nós rabiscamos aquilo em que estamos pensando, novas 
ideias emergem. A ambiguidade e a falta de detalhes em um sketch geram 
novas ideias. Aqui, ambiguidade é uma coisa boa, porque nós automati- 
camente começamos a preencher os espaços vazios na nossa cabeça. É 
isso que faz do sketch uma técnica “generativa": ela captura a ideia que 
nós já temos e ao mesmo tempo desperta novas ideias. 

Ao rabiscarmos novas soluções para o problema, podemos explorá- 
las sem necessariamente nos comprometermos a nenhuma delas. Isso 
nos dá novos insights e novas perguntas para serem respondidas. Sketch- 
ing é essencialmente um exercício de brainstorm.’ 

por Lennart Hennigs, Smashing Magazine 

Veja mais em http://www.smashingmagazine.com/2013/06/24/ 
sketching-for-better-mobile-experiences/ 











Alguns profissionais usam os rabiscoframes como uma espécie de “ras- 
cunho” do wireframe final. Depois da primeira rodada de desenhos e dis- 
cussões com o time, aísim o UX designer “passa a limpo” o material em forma 
de wireframe mais formal, feito através de algum software. 

Mas em outros casos, não: o próprio rabiscoframe acaba sendo a docu- 
mentação final para as outras áreas. Quando o time está mais entrosado e 
acostumado a trabalhar em conjunto e quando não há a necessidade de for- 
malizar o trabalho do UX designer em um wireframe completo, o próprio 
sketch é usado pelos diretores de arte, programadores e gerentes de projeto 
para darem sequência ao trabalho. 

A questão é que muita gente ainda tem receio de assumir o rabiscoframe 
como etapa da metodologia, seja por não dominar a técnica de desenho, seja 
por considerar o sketch algo muito imaturo e muitas vezes infiel ao resultado 
final da interface. 
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3.8 BOAS PRÁTICAS PARA RABISCAR 


Existem vários artigos disponíveis online sobre boas práticas na hora de criar 
seus rabiscoframes. Muitas pessoas têm resistência a incorporar os sketches 
em sua rotina de trabalho, simplesmente por não dominarem a técnica de de- 
senho. Mas a verdade é que você não precisa ser um Da Vinci para conseguir 
traduzir suas ideias no papel. 


Não saber desenhar não é um problema 


O primeiro passo para começar a rabiscar uma ideia é se desprender da 
vergonha de não saber desenhar. Muita gente não nasceu com esse dom e, 
assim como eu, sempre tirou notas baixas nas tarefas de desenho livre da es- 
cola. A questão é que isso tem pouca importância na hora de rabiscar uma 
tela. Saber expressar ideias no papel se tornou uma questão de sobrevivên- 
cia para quem quer evitar discussões pouco produtivas, em que cada um dos 
participantes tem uma imagem diferente na cabeça. O desenho é feito para 
ilustrar informalmente uma ideia e iniciar uma discussão. E só. Com o tempo, 
os “rabiscadores” vão pegando a prática e perdendo a vergonha. Além disso, 
os rabiscoframes normalmente circulam apenas entre os próprios membros 
do time. Se você tem vergonha de mostrar uma ideia para um membro de seu 
próprio time, então o problema não é a falta de habilidade com desenhos. 


O rabiscoframe não é uma entrega 


Os rabiscos raramente são entregues ao cliente ou a alguém da diretoria 
da empresa/agência onde você trabalha. Eles servem apenas para os próprios 
designers e desenvolvedores entenderem o que se espera de determinada in- 
terface, e algumas vezes não eliminam a necessidade de wireframes mais de- 
talhados sobre seu conteúdo e funcionamento. Normalmente, os rabiscos du- 
ram apenas alguns dias e, à medida que as soluções desenhadas vão se aper- 
feiçoando, são deixados de lado e substituídos por protótipos mais completos. 


O sketching é um exercício coletivo 


Poucas vezes fiz um rabiscoframe sozinho, sentado em minha mesa, ten- 
tando ilustrar algo que já estava decidido. A tática do lápis e papel nor- 
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malmente se mostra necessária nas discussões com outros participantes da 
equipe, no momento em que começam a surgir as primeiras dúvidas e di- 
vergências de opiniões sobre como determinada tela deve se comportar. Se a 
solução já está definida e você só precisa documentá-la, a sugestão é ir direto 
aos softwares de wireframe ou prototipagem. 


A borracha é dispensável 


Se você sente vontade de corrigir algo que acabou de desenhar, é sinal de 
que já está em um estágio de detalhamento posterior ao rabiscoframe. Ele 
exige uma boa dose de abstração de todas as partes envolvidas. Discussões 

(<3 h : l $ le” e d di º 2” 
como menu horizontal ou vertical? ou imagem na esquerda ou na direita! 
devem ser tomadas mais para frente, ou direto no Photoshop. 


Tenha sempre um caderno à mão 


Ter um caderno à mão em qualquer discussão ou brainstorm é uma boa 
dica para começar a fazer dos rabiscoframes um hábito. Instigue o designer 
a rabiscar aquilo que ele está sugerindo e ofereça a ele seu próprio caderno. 
Cadernos funcionam melhor do que folhas soltas, já que elas tendem a se 
perder no misterioso buraco negro das nossas mesas. E no fim, há um certo 
orgulho em guardar aquele caderno cheio de rabiscos criativos. 


Não tente pintar um quadro de Rembrandt 


Segundo este artigo de Owen Shifflett (http://viget.com/inspire/ 
5-things-to-consider-whilst-sketching) , o propósito inicial de um sketch 
não é produzir uma obra de arte. Na verdade, focar muito nos detalhes do 
sketch pode atrasar seu progresso e ainda fazer com que você pense nos 
detalhes mais do que deveria e se esqueça de olhar para o que realmente 
importa: conceito e direção. Fazer um sketch menos bem finalizado também 
facilita em outro ponto: as pessoas ficam mais à vontade para dar feedback e 
alterar o seu desenho quando ele não está finalizado ou polido. 


Faça sketches logo, e com frequência 


Depois que os sketches foram aprovados pelo cliente e pelo time, é hora 
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de refinar o que você fez. Continuar trabalhando com sketches por mais um 
tempo ajuda a evitar a síndrome do “ficar mexendo caixinhas no Photoshop 
até desmaiar”. Além disso, essa mudança do mouse para o lápis e papel pode 
ajudar bastante a evitar bloqueios criativos. O principal é ficar o mais tempo 
possível longe do computador - ele é uma grande ferramenta, mas também 
pode acabar sugando sua alma. 


Anote tudo 


É importante que seu sketch comunique detalhes o comportamento da 
interface, já que, visualmente falando, eles não são desenhos tão refinados as- 
sim. Anote na margem do papel ou crie um sistema de legendas. Isso também 
pode ajudá-lo a lembrar de mais detalhes quando olhar para os sketches no 
outro dia. 


Crie storyboards sempre que possível 


Contar histórias significa levar os espectadores do ponto A ao ponto B. 
Storyboards são ótimos para isso. Nesse ponto, é importante ser consistente 
e reutilizar elementos que já tenham sido desenhados, para que a pessoa 
que está vendo o sketch não pense se tratar de um novo elemento. Repare 
como cartunistas utilizam enquadramento e posição dos personagens para 
adicionar um pouco de contexto e intenção em cada quadro. Isso também 
pode ser usado na hora de rabiscar interfaces ou animações. 


Adicione cor somente quando fizer sentido 


Colorir seus sketches pode deixá-los mais bonitos, mas não é preciso 
comprar um estojo de lápis de cor e sair pintando tudo o que você desenha. 
Use as cores para dar destaque a um elemento importante e que realmente 
mereça destaque. 

A dica, no fim das contas, é saber adaptar a sua ferramenta às necessidades 
do projeto em questão. Você não precisa ser um especialista em wireframes 
ou um desenhista profissional para se tornar um UX designer. O mais impor- 
tante é o pensamento que existe junto com o desenho, e a clareza na hora de 
comunicá-lo para outras pessoas. 


67 


CAPÍTULO 4 


A boa e velha usabilidade 


Usabilidade é um termo usado para definir a facilidade com que as pessoas 
podem utilizar uma ferramenta ou objeto para realizarem uma tarefa. No 
campo de Human-Computer Interaction e User Experience, usabilidade nor- 
malmente se refere à simplicidade e facilidade com que uma interface (site, 
aplicativo, programa de computador, game etc.) pode ser utilizada. 

O termo ganhou mais notoriedade nos últimos anos, à medida que mais 
profissionais e empresas foram sendo envolvidos no processo de criação de 
interfaces. Hoje em dia, a usabilidade já é vista como um fator decisivo para 
o sucesso ou fracasso de um produto digital. 


4.1. Simplicidade não é simples Casa do Código 





4.1 SIMPLICIDADE NÃO É SIMPLES 





Pense na interface do controle remoto da sua TV. Uma série de botões agru- 
pados em diversas áreas, cada um com uma função diferente. Apesar dos 
agrupamentos e do uso de formatos e cores para diferenciar os botões mais 
usados, ainda assim existe informação em excesso. 

Agora pense na mesa de dentro de uma sala de estar. Um controle para a 
TV, outro para o DVD Player, outro para o aparelho da TV a cabo. E pense 
que uma mesma pessoa precisa saber usar todos esses controles para realizar 
tarefas simples como gravar um programa ou comprar um filme no pay-per- 
view. 

Chegar a uma solução simples de usabilidade é um processo bastante 
complicado. São necessários vários e vários rounds de explorações de design, 
além de discussões sobre priorização das funções que são mais importantes, 
quais podem ser eliminadas, escondidas ou despriorizadas. A vantagem das 
interfaces digitais é a possibilidade de exibir e esconder botões à medida que 
o usuário avança no fluxo. 

Simplificar é um processo tão difícil e repetitivo que muita gente diz que 
“design nunca acaba”. Sempre há a possibilidade de otimizar mais alguma 
área, diminuir a carga cognitiva sobre o usuário ou alterar o visual dos ele- 
mentos da interface para que eles pareçam mais simples de usar. 

Giles Colbourne trata justamente disso em seu livro Simple and Usable 
(http://www.simpleandusable.com) . O autor propõe 4 modelos para solu- 
cionar o excesso de informação e conseguir desenhar interfaces realmente 
simples. 
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Remova Esconda 





Organize Mova 





Remova: livre-se de qualquer coisa que não seja essencial para a apli- 
cação. Isso pode significar remover conteúdo, também, assim como a lin- 
guagem que você usa nos labels de navegação. 

Organize: distribua os elementos da interface de forma que eles se en- 
caixem em grupos lógicos. Isso pode significar tanto se basear nos modelos 
mentais de quem usa, quanto agrupá-los em padrões de interface que sejam 
mais familiares. 

Esconda: deixe apenas os itens mais importantes ao alcance (fazendo com 
que eles sejam óbvios), e esconda os outros, deixando-os acessíveis apenas por 
navegação. 

Mova: coloque algumas das funcionalidades em outro dispositivo ou 
outro lugar, de forma que a interface não fique responsável por mostrar todas 
as interações possíveis de uma vez só. 

Nas próximas seções, você confere alguns princípios e boas práticas con- 
hecidos quando o assunto é tornar interfaces digitais mais usáveis para os 
consumidores. 
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4.2 OFEREÇA INFORMAÇÕES EM PEQUENAS DOSES 


Apesar de serem os animais mais inteligentes do planeta, os seres humanos 
têm uma capacidade limitada em relação à quantidade de informação que 
conseguem (ou estão dispostos) a digerir quando estão ocupados realizando 
uma tarefa. Dependendo da natureza dessa tarefa, é importante garantir que 
a interface não esteja bombardeando o usuário com informação, para que ela 
consiga ser realizada com sucesso. 

Quantas vezes você já não acessou o seu internet banking e ficou vários 
segundos ali parado, tentando entender onde é que você precisa clicar para 
conseguir visualizar seu extrato bancário? Com o passar do tempo e com 
o envolvimento de profissionais de UX nesse tipo de projeto, essas mesmas 
interfaces passaram a ser redesenhadas para facilitar o acesso à informação 
e às ferramentas que o usuário está procurando. Hoje em dia, para citar o 
mesmo exemplo, é comum que o extrato de sua conta já apareça na própria 
tela inicial do seu internet banking, assim que você termina de fazer o login. 
Informações que as pessoas buscam com frequência são priorizadas, sem ne- 
cessidade de muitos cliques para se chegar até elas. 
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TYPICAL APPLE PRODLICT... 


A GOOGLE PRODUCT... 


[FIND] 


YOUR COMPANY'S APP... 


STUFFTHATHAPPENS.COM BY ERIC BURKE 
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Na verdade, apresentar informações com simplicidade e no exato mo- 
mento em que o usuário está procurando por ela já se tornou questão pri- 
mordial na hora de diferenciar aplicativos e produtos de sucesso. 

A tentação de adicionar links e conteúdo em excesso nas interfaces é bas- 
tante grande. Afinal, você quer oferecer o máximo de opções para o usuário 
e quer que o seu produto seja o mais completo possível para se diferenciar da 
concorrência. 

Mas a regra aqui é simplificar, reduzir e oferecer informações em doses 
digeríveis, para que as pessoas não se sintam pressionadas a tomarem de- 
cisões demasiadas em vários pontos diferentes da jornada. 


e Qual a ação principal que você quer que o seu usuário faça nesse mo- 
mento? 


e Quais são as ações secundárias? Dentre elas, quais você poderia re- 
mover sem prejudicar a tarefa que o usuário quer realizar naquele mo- 
mento? 


e Qual o mínimo de informação que o usuário precisa saber para realizar 
aquela tarefa? Qual a menor quantidade de texto possível (com menor 
número de caracteres) para explicar aquilo para ele? 


e As imagens que você pretende colocar na interface estão contribuindo 
para que o usuário realize a tarefa com mais facilidade? Como essas 
imagens podem ser repensadas para, além do caráter decorativo, as- 
sumirem também um papel informativo e ajudá-lo no fluxo? Cuidado 
também com excesso de banners e outros boxes que tentam chamar a 
atenção do usuário para algo que não é necessariamente essencial para 
realizar a tarefa que ele deseja. 


* Qual o mínimo de elementos de navegação que você precisa ter na 
tela naquele momento? O menu precisa ficar exposto o tempo todo? 
Daquela página, quais as outras páginas que o usuário pode querer 
acessar? Uma dica importante nesse ponto é olhar para as métricas e 
ver em quais links os usuários estão realmente clicando. Considere ex- 
cluir ou esconder os links menos clicados para deixar a interface mais 
simples. 
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4.3 CRIE HIERARQUIA NA PÁGINA 


Beautiful Nice Studio front beach” 


Description 


Reviews (1/131) 





Hierarquia nada mais é do que usar diferentes estilos visuais para os elementos 
da tela de modo a priorizar o que é mais importante. 

Através de uma boa hierarquia, é possível guiar os olhos do usuário pelo 
caminho que você deseja que ele percorra. Qual a primeira coisa que você 
quer que ele leia ou veja assim que entrar no seu site? 
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Et SY o, Search Signin «= Cart D 


Art Home & Living Jewelry Women Men Kids Vintage Weddings More v 


Shop directly from people 
around the world; 





f 7 m 
f Alana Little of makepienotwar i” 
a e si Es koy 
Recent Favorites 
Discover finds from around the marketplace 
aaa MPS, comin Sa 


Figura 4.1: Etsy.com: hierarquia clara usada para chamar atenção para o slo- 
gan. Em uma frase o usuário entende a proposta do site. 


Um dos desafios no design para interfaces digitais é manter a hierarquia 
clara à medida que novos elementos são adicionados na tela. Você já deve ter 
passado por isso: o seu cliente pede para adicionar mais dois ou três destaques 
na página inicial do site, além de um banner e uma chamada para uma pro- 
moção especial. Mas é nesse momento que a hierarquia da página começa a 
se perder. 

Veja o exemplo da homepage do msn.com. Além de falta de hierarquia 
clara no tamanho das fontes e o excesso de elementos no header do site, a 
adição de um banner na direita da tela começa a criar conflito visual com a 
manchete principal da home do site. 
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Qutlook.com Skype Mobile MyMSN Latino Bing Rewards E 


Web | MSN | Images | Video | News | Maps 


msn | 


Cl E a ear ee) ee AUTOS 


new & used car research findacar used-car listings 


VIDEO MORE 


May 10, 2014 as of 11:10 PM 


Chelsea, NY | > 82"/63* °F °C 5-day 


~ This is what choosing 
poverty looks like 


Dan Price chose to adopt a life of radical simplicity. See 
how he survives on $5,000 a year by living in an 
underground ‘hobbit hole’ he built from scrap wood 





“Just-in-time' scheduling creates chaos for workers 


BOB 30": 


EDITORS’ PICKS 


= Academy: First gay wedding » Late pope closer to sainthood = 5.6 quake felt in Alaska 


* Ukraine warns of ‘abyss’ * Van Gogh art found at bank + SF crash responder files sult 


» RobertF. Kennedy Jr.engaged » Teammate injuredinbarbrawl = Ex-fire chief eludes manhunt 


SPORTS ENTERTAINMENT 





[EEB (+=! wrouow Make MSN my homepage Welcome to MSN 


b> bing [Web’Seareh | 


Page options | Sign in 





OVERSTOCK CLEARANCE 





7" Tablet Bundle Bucco Crochet 
1.6GHz 4GB Wedge Sandals 
Price Save Price Save 
$59 70% $29 169% 
6pc - Ultra Soft 1600 Seiko Men's Aviator Il 
Series Bedsheets Chronograph Watch 





Price Save Price ve 
$29 msm $99 72% 
3 Pack Ly de rapa Ray-Ban Unisex 
Maxi Skirts Wayfarer Sunglasses 


| a 


Ou ainda o exemplo do magazineluiza.com: a pagina inicial possui 6 
grandes chamadas para o usuário clicar, cada uma com um tamanho e estilo 


diferente de fonte. Qual delas é mais importante? 
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@ contralde atendimento A, compre peio teisfone (11) 3508-9900 GN o 


faça seu login ou cadastre-se 
magazineluiza.com ó E 
van sor foi procure por código, nome, marca Q EE = 


anhe um prédio ábic “as compra em todo o site* 
ro SD fisted cupom MSSE pa 599,00 12% 7 pras à a partir de R$179,90 DESSES 


- domingo 


12% de desconto à 2d 
O Frete Grátis 
O Montagem Grátis 


*O frete 
válida para as cidade: 


ED ifj quanasoupa rack cozinhattatiala camabox cozinhaGiamy smarttv notebook 


Mostre para sua mãe o porquê que ela mora no seu coração, 


fl raça | faça uma homenagem pra ela agora! Clique aqui. 





Exemplos como esse são comuns na hora de desenhar a homepage de um 
site, por exemplo. Seu cliente (ou mesmo o time interno do local onde você 
trabalha) começa a pedir para adicionar mais e mais chamadas para seções 
diferentes do site, para produtos que foram lançados ou para novidades que 
eles queiram divulgar para os visitantes do site. 

Acontece que, quando tudo é importante, nada acaba sendo importante. 
É a mesma coisa do que chegar na prateleira de uma farmácia e tentar es- 
colher um shampoo para o seu cabelo (principalmente se você for homem). 
São tantas opções que você fica paralisado, sem saber exatamente qual delas 
escolher. 

Algumas boas práticas para conseguir uma boa hierarquia nas páginas 
são: 


e Organize itens similares com visual similar. 


e Evite inconsistências. Utilize o mesmo estilo visual para elementos que 
têm funções parecidas. Estilos visuais inconsistentes causam confusão 
para o usuário e deixam a interface poluída. 
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Use cores para diferenciar as ações principais. Use o contraste a seu 
favor para atrair o olhar do usuário para a ação que você quer que ele 
faça. 


Categorize. Agrupe links por temas, em vez de simplesmente listá-los 
na tela. 


Use tamanhos de fonte diferentes para criar hierarquia na página, mas 
limite a quantidade de tamanhos de fonte para manter harmonia. 


Tenha um bom equilíbrio de textos e imagens. Lembre-se que, depen- 
dendo da tarefa que o usuário está realizando, imagens nem sempre são 
bem-vindas. Se ele está no meio de um processo de pagamento, ima- 
gens podem acabar tirando o foco da ação principal que você quer que 
ele faça. 
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4.4 DIGA AO USUÁRIO O QUE FAZER A SEGUIR 


TOPSHOP 


4 MOTO DIRTY RASPBERRY 
SUPERSOFT LEIGH JEAN 


£38.00 
aaa 


vy mun MG 


GO TO CHECKOUT 





Figura 4.2: E-commerce TopShop sinaliza claramente quando um item é adi- 
cionado ao carrinho e sugere ao usuário que prossiga para o checkout - o 
próximo passo do fluxo de compra. 
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Um erro comum de sites e aplicativos é criar ruas sem saída para os usuários. 
Tenha certeza de que, em toda e qualquer tela do seu produto, está claro para 
o usuário o que ele deve fazer a seguir. Quando o usuário se vê sem opções, é 
comum que ele abandone o site ou tenha que voltar para a página inicial para 
tentar encontrar novamente o que ele procurava. 

Um exercício interessante para otimizar a usabilidade do seu produto é 


olhar para cada uma das telas com as seguintes perguntas em mente: 


e O usuário sabe onde está? A tela comunica com clareza em que 
página/site/passo do fluxo ele se encontra? 


e O usuário sabe o que fazer a seguir? A ação principal está nítida o su- 
ficiente? 


e O botão onde eu quero que o usuário clique está claro? O texto do 
botão dá ao usuário alguma dica do que vem a seguir? 


e Se essa tela é uma tela de confirmação no final de um fluxo, eu estou 
aproveitando para sugerir que o usuário faça algo mais, aumentando o 
tempo de navegação e o nível de engajamento dele com o produto? 


X / 


Nome de botão vago Nome de botão claro 


ENVIAR CRIAR MINHA CONTA 





Figura 4.3: Nomes de botões mais claros ajudam o usuário a entender melhor 
a consequência da ação. 


Um problema clássico de várias interfaces existentes hoje é a tentativa de 
dar opções demais ao usuário e acabar confundindo-o. Uma coisa para se 
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ter em mente na hora de criar um design é que cada decisão que você força 
o usuário a tomar significa alguns segundos a mais de esforço cognitivo. Ele 
precisa olhar as opções disponíveis, entender o que cada uma delas faz, e então 
decidir qual é a opção desejada. 

Forno de Micro-ondas LG MH7043R com 24 Programas, Função Grill, 


Eco ON, I-Wave, Descongelamento, Trava para Crianças e Frente 
Espelhada - 30 L - Prata 


@ Passe o mouse para ampliar 


(Cód. Item 2933714) 
(Cód EAN 7893299430251) Outros produtos LG 


EB ainda não avaiado Faça uma Avaliação 
Selecione 


Selecione uma opção + 





De: R$ 599,90 
Far 
por R$ 354,00 
licionar à 


com desconto Adi it) 
ou até 12X de R$ 29,50 alist de Caseeento. 


sem juros 


| 
H y > Economia de: R$ 245,90 





g Baixar Manual em PDF ( 8779kb ) | r gn não 


boleto bancário ou débito online. 


O Que Achou? 


Calcule o frete e o prazo de entrega estimados para sua região. Dúvidas? Clique aqui. 


a 4 t Informe seu CEP: E > Não sei meu CEP 


OP EvAmo RÉ Eu Quero | «4 Eu Tenho 


Compartilhe Seguro de Garantia Estendida Original 
Comprar com seguro Vídeo Explicativo da Garantia 
4 o 4 Sem Seguro de Garantia Estendida Original G Comprar com Garantia 
Ej Facebook [E] Twitter E] compartihar > Ler Regulamento [ Li e aceito 


Veja o exemplo da página de produtos dentro do site pontofrio.com: ela 
oferece 5 opções diferentes ao usuário do que fazer a seguir. 

Quando o usuário clica em Comprar (teoricamente, o maior botão da 
tela, o que leva a crer que é onde ele deve clicar), o site exibe uma mensagem de 
erro dizendo que é preciso selecionar uma voltagem para o micro-ondas antes 
de adicionar ao carrinho. Mas no layout da página o Selecione fica perdido 
no meio de tantas outras informações e muito distante do botão Comprar. 
Infelizmente, a relação não está clara. 
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The page at www.pontofrio.com.br says: 


Você não escolheu qual produto você quer comprar. 
Por favor selecione uma opção. 


[nad | 





4.5 DÊ FEEDBACK SOBRE O ESTADO DO SISTEMA 


Clareza é a palavra de ordem aqui. O usuário precisa entender, a qualquer 
momento, o que está se passando com o sistema. Se ele preencheu um for- 
mulário incorretamente, por exemplo, é preciso que a interface comunique 
isso com clareza para ele. Inclusive dando instruções precisas sobre como 
resolver o problema. 





Error Copying File or Folder 


(x) Catastrophic failure | 
a | 
| 
| 











Figura 4.4: Falha catastrofica. Inclusive na experiéncia do usuario. 


A regra essencial de qualquer produto interativo é que toda ação tem que 
ter uma reação. E uma interface que responde imediatamente aos comandos 
do usuário contribui bastante para uma boa experiência. 
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Username 


clarewemail 


Another user with this username already exists. Maybe it's 
your evil twin. Spooky. 


Figura 4.5: Um outro usuário com o mesmo nome já existe. Talvez seja seu 
irmão gêmeo do mal. Assustador. 


Você já deve ter passado por essa experiência em algum site: termina de 





preencher um formulário enorme, aperta o botão Enviar e nada. Nenhuma 
resposta. Você não sabe ao certo se a sua compra está sendo processada, se 
você precisa aguardar ou se precisa clicar novamente. Em muitos casos, a 
falta de clareza sobre o status do sistema faz com que os usuários cliquem 
várias vezes no mesmo botão - podendo acarretar duplicidades de cadastros 
e compras, gerando mais trabalho e custos para a empresa. 


4.6 EVITE ERROS ANTES QUE ACONTEÇAM 


Mais interessante ainda do que comunicar erros com clareza quando eles 
acontecem é evitar que eles aconteçam em primeiro lugar. Erros normal- 
mente são causados por erros dos usuários ao interagirem com o sistema. 
Mas se você parar pra pensar, o erro do usuário é culpa da interface que não 
o guiou corretamente na hora de realizar a tarefa. 

Repare no exemplo abaixo do iOS. Quando você seleciona uma imagem 
no seu aplicativo de fotos e decide compartilhar, o sistema oferece algumas 
opções (mensagem, e-mail, Facebook etc.). Mas repare que, quando você se- 
leciona mais do que 5 imagens (exemplo da direita), o iOS automaticamente 
oculta a opção de compartilhar por e-mail. Isso porque ele sabe que, no geral, 
6 imagens anexadas a um e-mail o tornarão pesado demais para ser enviado, 
podendo ser recusado por alguns provedores. 
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AirDrop 

Share instantly with people nearby. If they 
do not appear automatically, ask them to 
open Control Center and tum on ArDrop. 


AirDrop 

Share instantly with people nearby. If they 
do not appear automatically, ask them to 
open Control Center and turn on ArDrop. 





Message Facebook Facebook 


Mail Cloud Message iCloud Flickr 


Copy Print Copy Print 


Cancel Cancel 


Figura 4.6: Quando mais de 5 fotos são selecionadas, o iOS oculta a opção de 
compartilhar por e-mail, para que ele não fique muito pesado. 


O Twitter é outro exemplo de produto que prefere evitar que os erros 
aconteçam, em vez de mostrar mensagens de erro quando já é tarde demais. 
Na hora de compor um tweet, a interface destaca em vermelho os caracteres 
excedentes (acima de 140) e desabilita o botão para evitar que o usuário erre. 
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Compose new Tweet 


Estou escrevendo um novo tweet, mas ele pode acabar ultrapassando o limite 
de 140 caracteres. O Twitter antecipa meu erro e marca de vermelho o trecho do 
tweet que está em excesso... 


G Addphoto O Location disabled 





Figura 4.7: O erro é comunicado com clareza e o botão é desabilitado para 
que ele sequer aconteça. 


A Siri (a assistente de voz do iPhone) também conhece bem os erros 
comuns dos seres humanos. Quando já passou da meia-noite e você pede 
para ela registrar um lembrete para você fazer “amanhã”, ela confirma se por 
“amanhã” você quis dizer aquele mesmo dia ou o dia seguinte. 
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a... Verizon > 12:27 AM 1 83% 


«é Remind me to inflate my 
tires tomorrow at 9 AM 99 


Just to be clear... did you 
mean October 21st, or October 
22nd? 


October 21st 


October 22nd 





O Gmail vai mais longe na hora de prevenir erros. Quando você clica 





em Enviar, ele escaneia o texto do seu e-mail. Se você escreveu palavras 
como “anexado” ou “anexo” e não adicionou nenhum arquivo anexado à sua 
mensagem, ele mostra um alerta confirmando se você realmente não quer 
enviar um arquivo ou se foi somente uma distração sua. 
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t The page at https://mail.google.com says: 
] Did you mean to attach files? 

J 

You wrote “I've attached” in your message, but there 

are no files attached. Send anyway? 
C 

Cancel OK 
A 
Ive attached a file blah blah dlah.... 


Successful Cr 
G 


Figura 4.8: Você escreveu ‘anexe? na mensagem mas não tem nenhum ar- 


quivo anexado. Mandar mesmo assim? 


Existem vários métodos para prevenir erros antes que eles aconteçam. 
Uma forma interessante de descobrir os erros mais comuns dos seus usuários 
ao interagirem com seu produto é olhar para as métricas do site. Quais er- 
ros eles estão cometendo com mais frequência? Qual a informação que eles 
inseriram errado para que o erro acontecesse? Por que eles pensaram que 
deveriam fazer uma ação diferente da que estava sendo pedida? Como você 
pode evitar que esse erro aconteça com novos usuários? 


As taxas de conversão (e o seu cliente) agradecem. 


4.7 SIMPLIFIQUE FORMULÁRIOS 


Qual o mínimo de informação que você precisa coletar do usuário para que 
ele possa seguir adiante no fluxo? 

Parece uma pergunta simples, mas muita gente deixa essa discussão pas- 
sar batida na hora de elaborar um formulário de cadastro ou de compra. Uma 
prática comum (mas nem sempre ideal) é reunir em um único formulário to- 
dos os campos que você, como empresa, deseja saber sobre o consumidor. 

Mas será que todas as informações que estão sendo pedidas são extrema- 
mente necessárias? Alguma dessas informações pode ser coletada em um mo- 
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mento futuro? Está claro para o consumidor por que aquela informação está 
sendo solicitada? 

Um ótimo exemplo de simplificação de formulário é o de cadastro no 
AirBNB, um site de aluguel de imóveis que tem versões em vários países. 

O formulário para consultar se um imóvel está disponível para aluguel 
pede apenas as informações extremamente relevantes para aquela ação. 
Repare que eles não pedem para o usuário se cadastrar, nem pedem o en- 
dereço de e-mail, nem nenhuma outra informação que não tenha relação di- 
reta com aquela tarefa que o usuário pretende realizar (consultar disponibil- 
idade de um imóvel). 


Ci) - 


Beautiful Nice Studio front beach** 


=. 
ns 
+ Tap to Select 
- Tap to Select 
2 i 
# 


Um outro exemplo interessante é o do site Nike.com. Na hora de fechar 
uma compra, eles dão ao usuário a opção de “Guest Checkout” (Comprar 
como convidado), permitindo que eles fechem a compra sem a necessidade 
de criar um perfil dentro do site. 
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to 18066 My Live a 


HOW WOULD YOU LIKE TO CHECK OUT TODAY? 


SIGN IN GUESTS PAYPAL MEMBERS 


Check out without logging in. Make your payment with PayPal's secure services 
Email Address 


Optional; Register with Nike to receive ‘You'll have a chance to apply pro 





odes andor 








Password Free and easy returns on all ordersExpress gin cards betore you complete 
checkout and acking Tracking and 


sharing your Nikes activity 


Become a Nike member during checkout. 








“Como assim, vou deixar a pessoa fazer uma compra sem sequer pedir 
para ela criar um login e senha?” 

Parece assustador do ponto de vista da empresa. Mas pare um momento 
para pensar no objetivo do usuário naquele momento: ele está super empol- 
gado com a ideia de comprar um tênis novo. Pedir para ele criar um cadastro 
Nike nesse momento seria um desvio de rota absurdamente grande na exper- 
iência do usuário. 

“Mas assim eu estou perdendo a oportunidade de ganhar um usuário 
cadastrado!” 

Se o usuário quer comprar o tênis, o melhor a se fazer é garantir que ele 
consiga realizar essa tarefa da forma mais simples possível. Isso vai assegurar 
uma venda a mais no seu e-commerce, que tem impacto direto na lucrativi- 
dade da empresa. 

“E depois eu perco esse usuário para sempre?” 

Não. O que a Nike faz é apenas pedir o endereço de e-mail do usuário, 
como parte natural do processo de compra. Depois de alguns dias, depois 
que o tênis foi entregue e o usuário está feliz da vida com o novo produto, 
eles mandam um e-mail de follow-up convidando-o a terminar o cadastro, 
criar uma senha e usufruir dos inúmeros benefícios de ter um perfil dentro do 
site. Aliás, quando eles enviam esse e-mail pós-compra eles oferecem algum 
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tipo de recompensa para o usuário (“termine seu cadastro e não pague frete 
em sua próxima compra”). Mais um exemplo da combinação de usabilidade 
com psicologia mencionada no início do livro: eliminar barreiras do fluxo do 
usuário na hora da compra e dar a ele um motivo para voltar ao site e terminar 
o cadastro mais tarde. 

Ainda no assunto “formulários” uma boa prática de usabilidade é ter 
certeza de que você está apresentando o melhor tipo de campo para o usuário. 
Quando o usuário precisa selecionar uma data, por exemplo, é muito mais 
fácil e muito mais familiar para ele apresentar as opções em formato de cal- 
endário -em vez de mostrar somente um campo texto e torcer para que ele 
digite a data no formato DD/MM/AAAA que você precisa. 

Veja o exemplo do site fourseasons.com. Na hora de solicitar a data em 
que pretende se hospedar em um dos hotéis, o site apresenta aos usuários 
um calendário onde ele pode selecionar a data de check-in e de check-out de 
forma muito mais visual do que simplesmente um campo de texto. 


ACCOMMODATIONS PHOTOS & VIDEOS SERVICES & AMENITIES DINING SPA DESTINATION OFFERS MAKE A RESERVATION 


When will you be staying with us? 


ET on 22012 JUNE 2012 JULY 2012 [>] 


Su Mo Tu We Th Fr Sa Tu We Fr Sa 
3 4 6 7 


06/14/2012 


10 11 


How many guests? 17 18 19 20 21 2 25 


2 2| abuts 0 re 24 25 26 27 28 29 
MULTIPLE ROOMS CORPORATE/PROMO CODE 


FIND age E ] 





Nos últimos anos, vários websites de companhias aéreas começaram a 
adotar o mesmo padrão de interação para permitir que os usuários sele- 
cionem as datas dos voos com mais comodidade e com menos chances de 
erro. 

O tópico “usabilidade” é bastante extenso e há vários anos muito con- 
teúdo sobre o assunto é publicado, tanto online quanto em livros. Existem 
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diversos princípios de usabilidade listados por autores diferentes e também 
muitos pontos de discórdia entre eles. 

Mais importante do que decorar uma lista pronta é começar a prestar mais 
atenção enquanto estiver utilizando produtos digitais e começar a julgar, por 


conta própria, o que funciona e o que não funciona em matéria de usabilidade. 





GOSTA DESSE ASSUNTO? 


Se você tem interesse em conhecer mais sobre usabilidade, acesse http: 
//fabricio.nu/usabilidade para ver sugestões de livros mais avançados. 
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CAPÍTULO 5 


A beleza dos pequenos detalhes 


As pessoas não experienciam produtos e serviços de uma única vez. Apesar 
de o Facebook ser um produto gigante, com uma série de funcionalidades, 
aplicativos, páginas e recursos, não é dessa forma que o usuário comum tem 
contato com a plataforma. O Facebook é aquela mensagem que um amigo 
mandou e você respondeu em poucos segundos. É aquele passatempo de 
passear pelo seu feed de notícias no seu celular e curtir um ou outro post de 
seus amigos enquanto espera o elevador chegar. É uma notificação que você 
recebe no meio do dia, é uma foto que decide compartilhar com sua família. 

Ao contrário das pessoas que trabalham com o desenvolvimento e design 
de produtos digitais, os usuários finais costumam ter uma visão fragmentada 
sobre o que o produto realmente é. O produto, para eles, é uma série de pe- 
quenas interações que formam uma impressão (positiva ou negativa) com o 
passar do tempo. 

E para construir experiências que sejam memoráveis e relevantes para as 
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pessoas, muitas vezes é preciso estar atento a essas pequenas interações e de- 
talhes. 

Os pequenos pontos de contato entre consumidor e marca são tão 
importantes para UX que em 2012 Dan Saffer publicou um livro (http:// 
microinteractions.com) onde dava um nome para esses momentos: Microin- 
terações. 





MICROINTERAÇÕES 


“Microinterações são momentos contidos de um produto que giram 
em torno de um único caso de uso - eles têm apenas uma função princi- 
pal. Cada vez que você muda uma configuração, sincroniza seu disposi- 
tivo, configura um alarme, cria um password, faz login em um site, define 
uma mensagem de status, favorita ou curte algo, você está engajando 
com uma microinteração. Elas estão em todo lugar: nos dispositivos que 
carregamos, nos eletrodomésticos da nossa casa, nos aplicativos no nosso 
celular e computador, e até embutidos nos ambientes em que vivemos e 
trabalhamos. Muitos produtos e aplicações são construídos inteiramente 
em torno de uma única microinteração” 











É o tal “slide to unlock” do seu iPhone. Ou o padrão de desenhar a senha 
para desbloquear seu smartphone Android. O bonequinho que você arrasta 
para o Google Maps para ativar o modo StreetView. O clássico botão “iniciar” 
do Windows. 

Todos esses são exemplos de microinterações que foram polidas ao ex- 
tremo. O cuidado com os detalhes contribui para que aquele pequeno ponto 
de contato entre consumidor e marca seja único, icônico, prazeroso e fácil de 
usar. 
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Pull down to refresh. 





Pinch Apart to Create item 





Figura 5.1: 1. Slide to unlock do iPhone, 2. Pull to refresh do Twitter, 3. Ar- 
rastar o pegman no Google Maps, 4. Buy with one click da Amazon, 5. Botão 
iniciar do Windows, 6. Pinch apart to aplicativo Clear. 


Repare que cada um desses momentos é apenas um pequeno recorte de 
uma funcionalidade maior. Em vez de olhar para o número de funcionali- 
dades que o seu produto possui, a regra aqui é olhar para as pequenas inter- 
ações que compõem tal função. 

Dan Saffer define as microinterações como “as menores unidades pos- 
síveis da experiência do usuário”. Mas menor não quer dizer “insignificante”. 
Na verdade, algumas interações podem ter impacto grandioso em como as 
pessoas experienciam o seu produto e percebem sua marca. 

O fato é que poucos designers e desenvolvedores dedicam tempo sufi- 
ciente para pensar nos detalhes que fazem um produto ser único - e deixam 
passar oportunidades excelentes para melhorar a experiência dos usuários em 
sua manifestação mais granular e corriqueira. 
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Bom para os usuários, bom para a empresa 


Há quem diga que esse tipo de detalhe é supérfluo: “o mais importante é 
fazer o produto funcionar, colocar o produto na rua”, dizem os mais céticos. 
Mas se você pretende colocar um novo produto no mercado, as pequenas 
nuances de interação podem ser uma oportunidade e tanto para criar difer- 
enciação em relação aos competidores. 

Hoje em dia, é comum que novos produtos surjam, diariamente, em mer- 
cados que já são extremamente competitivos. E grande parte desses produtos 
que estão competindo pela atenção dos consumidores possuem funcionali- 
dades muito parecidas entre si. 

São tantos os produtos disponíveis por aí que cumprem a mesma função, 
que os consumidores já estão começando a optar por aqueles que são mais 
agradáveis de usar. Não é mais sobre “encontrar um aplicativo que me permita 
anotar minha to-do list”, mas sim “encontrar o aplicativo que faz com que essa 
tarefa seja agradável e fácil de fazer”. 

Mas, além de criar diferenciação em mercados com paridade de produ- 
tos, esses pequenos detalhes - quando bem projetados - podem trazer outros 
benefícios para os usuários e para as empresas: 

Para os usuários, interações bem desenhadas são fáceis de usar e dão a 
sensação de que o produto é mais eficiente. Elas também tornam o processo 
mais agradável, ajudando a aumentar o nível de engajamento dos usuários 
com a aplicação. 

Para as empresas, interações bem desenhadas criam fidelidade entre os 
usuários e o produto. Também aumentam as taxas de conversão ao reduzirem 
a fricção no fluxo do usuário, permitindo que eles completem a tarefa com 
mais facilidade. Além disso, é claro, proporcionam experiências memoráveis 
e melhoram a percepção que os usuários têm das marcas. Não é à toa que de- 
signers costumam preferir produtos da Apple, uma empresa que ganhou pop- 
ularidade nos últimos anos pelo nível de cuidado que tem com os pequenos 
detalhes das experiências que oferecem. 

Um estudo realizado por Des Taynor (http://brucejacob.tumblr.com/ 
post/372896867/the-thickness-of-napkins) mostrou o quanto os pequenos 
detalhes podem afetar a percepção que as pessoas têm das experiências pelas 
quais elas passam, não apenas no mundo digital. Nos restaurantes, por ex- 
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emplo, a espessura dos guardanapos tem impacto direto no preço que os 
usuários estão dispostos a pagar pela refeição. Um detalhe que muitas vezes 
passa despercebido para aqueles que são responsáveis por “desenhar a exper- 
iência de comer em um restaurante” mas que afeta o subconsciente dos con- 
sumidores e impacta diretamente na percepção que eles têm sobre o estab- 
elecimento. 

Nas próximas seções, você verá algumas boas práticas em interfaces dig- 
itais em que a atenção aos pequenos detalhes faz uma grande diferença na 
experiência do usuário. 


5.1 EVITE ELEMENTOS EM EXCESSO 


Uma tentação comum na hora de desenhar interfaces é adicionar um novo 
elemento na tela quando você precisa apresentar uma nova informação para 
o usuário. Mas será que não é possível reutilizar um elemento que já esteja lá? 

A interface de pagamento do Gumroad utiliza um mesmo elemento para 
passar duas mensagens diferentes: a miniatura do cartão de crédito no canto 
superior direito indica a bandeira do cartão (Visa) quando o usuário digita os 
números, mas também serve como um indicativo de onde ele pode encontrar 
o código verificador (CVC) quando ele pula de um campo para o outro do 
formulário. 


Payment details Ws) Payment details = 


97 


5.2. Revele informações progressivamente Casa do Código 





5.2 REVELE INFORMAÇÕES PROGRESSIVAMENTE 


O New York Times traz uma solução inteligente para simplificar a interface 
no campo de comentários de seu site. Em vez de exibir logo de cara os campos 
de cadastro necessários para deixar um comentário em um artigo, ele preferiu 
simplificar. 

Primeiro, o usuário vê apenas um campo convidando-o a comentar a 
notícia. 


@ 217 COMMENTS 


ALL READER PICKS NYT PICKS Newest + 


amydm3 Sen fre oc @ PFLAG 


Why can't the publican Party refuse to fund recalcitrant tea party members if they 


ke grown ups? 






refuse to behave 


Oct.2, 2013 atG:3Opm REPLY RECOMMEND + 





R. Law vos S 

Mo, you say ” Cruz's sock puppet ”, but is Cruz really Just doing the bidding of Club for 
Growth, the Grover Norquist pledge, Heritage, FreedomWorks, etc,, and aren't they the 
real agents manipulating Boehner ? 


Só depois de clicar é que os campos de cadastro são expostos. 
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MB 217 COMMENTS 


ait ® READERPICKS NYT PICKS Newest v 
Write a Comment Suggest a Correction? 
Display Name Location 
Not You? 


E-mail me at az@ia.net (change?) when my 
comment is published 


Comments FAQ » 


amydm3 z 


Why can't the Republican Party refuse to fund recalcitrant tea party members if they 


réfuse to behave like grown ups? 


Uma medida simples, mas que evita que a tela fique muito poluida com 
elementos que não são estritamente necessários em um primeiro momento. 


5.3 SEJA CUIDADOSO COM O TEMPO DO USUÁRIO 


Veja o exemplo do Flickr na hora em que os usuários estão subindo uma série 
de fotos para publicar no site. 

Como o processo de upload de fotos pode ser demorado (dependendo do 
número de imagens que o usuário quer enviar e dependendo da qualidade de 
sua conexão), o Flickr resolveu evitar que o usuário fique parado esperando 
o upload ser concluído. 
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Figura 5.2: Flickr sinaliza na própria aba do navegador a porcentagem de up- 
load das photos do usuário. 


Em vez disso, ele utiliza o próprio título da aba como um indicador de 
progresso. Assim, o usuário fica livre para passear por outras abas do naveg- 
ador enquanto o Flickr faz o trabalho pesado de subir as fotos para o site. 

Um outro exemplo é o da Blizzard, durante o processo de instalação de 
jogos pesados como World of Warcraft ou Diablo. Como o tamanho dos ar- 
quivos pode totalizar 5GB ou mais, o processo completo de instalação pode 
levar longos minutos. Mas parece que a Blizzard conhece bem o seu público- 
alvo e o contexto de uso: gamers avançados que acabaram de comprar o jogo 
e estão quase tendo um infarto, tamanha a ansiedade para começar a jogar. 





A solução é trabalhosa. Primeiro, uma solução técnica: garantir que o sis- 
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tema comece a instalação pelos arquivos que são indispensáveis para o jogo 
funcionar, e deixar os arquivos “supérfluos” (como animações e minifilmes) 
para o final. Depois, uma solução de UX: sinalizar com cores diferentes a 
evolução da barra de progresso. A partir do momento em que a barra de 
instalação fica amarela (segunda imagem), isso significa que o jogo já está 
disponível para ser iniciado, mesmo que ainda não contenha todas as ani- 
mações e filmes dentro dele. Repare também que, nesse momento, o botão 
de “Play” no canto direito passa a ficar habilitado, permitindo que o usuário 
comece a jogar o tão desejado jogo. 

O tempo do usuário é algo precioso para ele. Produtos que entendem essa 
importância conseguem utilizar isso a favor da experiência do usuário. 


5.4 CRIE EXPERIÊNCIAS PERSONALIZADAS 


À medida que os usuários começam a interagir com o produto, uma série de 
informações pode ser coletada sobre ele, mesmo que invisivelmente. E algu- 
mas empresas já perceberam que podem usar essas informações para fazer 
com que a experiência do usuário seja percebida como mais personalizada. 
Veja alguns exemplos simples: 


Welcome to Wells Fargo 
Enter your PIN 


Cover the keypad while you enter your PIN 





Get $80 BP. All Other 


Checking x-1234 E Transactions 





A interface do caixa eletrônico do banco Wells Fargo “aprende” com o pas- 
sar do tempo qual a transação financeira que o usuário realiza com mais fre- 
quência. Na próxima vez que ele for até um caixa eletrônico, aquela transação 
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comum (sacar 80 dólares, no meu caso) é destacada em sua tela inicial. Uma 
espécie de “atalho” para a transação mais frequente. Se eu fosse anotar na 
ponta do lápis quanto tempo e quantos “cliques” eu já economizei com isso, 
daria para escrever um livro. 

Já o Ebay, como é de se esperar, controla todas as compras que você já fez 
no site. Quando você está vendo a página de um produto que você já tenha 
comprado anteriormente, o nome do botão comprar muda de “ Buy” para “ 
Buy Another”. 


New other (see detalls) 


A) 1 5 available / 60 sold 


US $12.95 Buy another 


Add to cart W 


É um detalhe simples, mas que evita que usuários mais distraídos com- 
prem duas vezes o mesmo produto sem querer. E para usuários que não es- 
tavam distraídos e que realmente querem comprar o mesmo produto pela 
segunda vez, essa pequena mudança no nome do botão o ajuda a ter certeza 
de que ele está realmente comprando o produto que já utilizou. 


5.5 ADIVINHE A INTENÇÃO DO USUÁRIO 


As ações do usuário geralmente têm uma intenção por trás. Talvez a intenção 
não seja explícita, ou consciente, mas, a partir do momento em que o UX 
designer começa a pesquisar e entender os motivos por trás daquela ação, é 
possível bolar soluções criativas para facilitar a vida do usuário. 


Veja o exemplo do aplicativo de bookmarks Pocket. A principal função 
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do aplicativo é salvar links para serem lidos mais tarde. O que eles fazem é 
antecipar qual a intenção do usuário: quando ele abre o aplicativo e existe 
um link copiado em sua área de transferência, o aplicativo exibe uma barra 
oferecendo para salvar o link. Mais uma vez: um atalho, para evitar cliques 
desnecessários do usuário. Se esse atalho não estivesse ali, o usuário teria que 
clicar em “Salvar Novo Link” depois colar o link que estava copiado, e depois 
confirmar. Com esse atalho, o usuário realiza a mesma tarefa com um único 
clique. 





Topol's Top Ten Targets for 
Wireless Medicine 


So What If You Have Big Data? 
Without Data-Driven Processes 
And Products, It's Useless 


First Round Debuts A 
‘Common Application’ For 
Student Engineers To Apply 
For And Find Jobs At Portfolio 
Companies 





Dave Chappelle: In His Own 





Figura 5.3: O aplicativo Pocket exibe um atalho na parte inferior da tela caso 
o usuário tenha um link copiado em sua área de transferência. 


O Google Chrome faz algo parecido. Quando ele percebe que o usuário 
vai até as configurações do navegador e escolhe deletar o histórico de naveg- 
acão duas vezes ou mais em um curto intervalo de tempo, ele passa a exibir 
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uma pequena mensagem na parte de cima da interface. 


Clear browsing data 


Psst! Incognito mode (Ctrl+Shift+N) may come in handy next time. | 


Obliterate the following items from: the past week W 
Clear browsing history 
Clear download history 
Delete cookies and other site and plug-in data 

i Empty the cache 

Clear saved passwords 
Clear saved Autofill form data 
Clear data from hosted apps 


Deauthorize content licenses 


Learn more Cancel | | Clear browsing data 


| 


] 


Figura 5.4: “Psiu. O modo incógnito (Ctrl+Shift+N) pode ser útil na próxima 
vez. 


Além de poupar o usuário do trabalho de ficar deletando o histórico de 
navegação toda vez que ele quer evitar deixar rastros, o Chrome aproveita para 
ensinar o usuário sobre uma das funções do navegador. É quase como se ele 
tentasse prever qual a intenção do usuário no momento em que ele interage 
com o produto. 

Um outro exemplo desse mesmo princípio de usabilidade é o de vários 
players de música disponíveis no mercado (iTunes, Spotify, entre outros). 
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Fertile Field 


Bobby McFerrin 


ane 





Quando você clica no botão “ voltar” ou “ Rewind’, existem duas al- 
ternativas que podem acontecer, sem que vocé sequer perceba: 


e Se a música acabou de começar, o botão Rewind volta para a musica 
que estava tocando antes dessa. 


e Se já se passaram alguns segundos, o mesmo botão Rewind volta para 
o segundo 0:00 da música que está tocando atualmente. 


Por que eles fazem isso? Porque quando você está ouvindo uma música, 
gosta muito dela e quer ouvi-la novamente, nem sempre você consegue aper- 
tar o botão Rewind rápido o suficiente, antes de a música terminar. Então o 
aplicativo lhe da alguns segundos “de folga”. Mesmo que a próxima música já 
tenha começado, você ainda tem quatro ou cinco segundos de desconto para 
apertar Rewind e voltar para sua música favorita. 


Ah, a beleza dos pequenos detalhes. 


5.6 FAÇA O TRABALHO PESADO 


Repare no exemplo a seguir do Google Plus. Como toda rede social, é obvia- 
mente importante para eles que você mantenha o seu perfil o mais completo 
possível. 

Mas, em vez de perguntar onde você trabalha com um campo de texto 
aberto, fazendo com que você tenha que digitar o nome da empresa, eles bo- 
laram uma solução mais simples. Eles varrem os perfis dos seus amigos na 
rede social e procuram o local de trabalho de todos eles. Ao observarem que 
uma grande parcela dos seus amigos trabalha na empresa X, eles já lhe ofer- 
ecem essa opção de empresa prontamente na hora em que você faz login no 
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site. Tudo o que você precisa fazer é clicar em “Sim” - e então eles atualizam 
aquela informação no seu perfil. 


COMPLETE YOUR PROFILE 





14 of your friends work at Google. 
Do you work here, too? 


Yes No 


Figura 5.5: O Google Plus faz o trabalho pesado para que o usuário só precise 
clicar uma vez para confirmar. (via Little Big Details) 


5.7 SEJA HONESTO COM SEUS PEDIDOS 


Pedir para o usuário fornecer informações pessoais é um momento delicado 
da experiência do usuário. Muitas vezes ele não vê o benefício explícito em 
fornecer aquela informação - e acaba achando o formulário trabalhoso de- 
mais para ser preenchido. 

Mas veja o exemplo dos serviços de e-mail Mailchimp na hora de pedir 


para o usuário cadastrar as informações sobre o seu site. 
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Website URL 





So we can automagically grab your logo and color palette from your website. | No websito? 


Your Industry 


Please Specify... 


4> 


So we can show you now your campaign performance compares to similar companies/organizations. 


Timezone 


(GMT -4:00) Eastern Time 


4> 


When you schedule campaigns, we'll use this timezone as a reference. 


Para cada informação que eles pedem ao usuário, existe uma breve expli- 
cação sobre como aquele dado será usado. É uma forma direta e rápida de 
fazer com que a troca fique mais justa: o usuário fica sabendo na hora como é 
que aquela informação será usada pela empresa, e vê qual o benefício que ele 
recebe em troca. 


5.8 ExPRESSE A PERSONALIDADE DA SUA MARCA 


Nos dias de hoje, consumidores são expostos com muito mais frequência às 
interfaces criadas por uma marca do que pelos esforços de comunicação que a 
marca faz através de propaganda, relações públicas ou eventos, por exemplo. 

Pense em quantas vezes você tira o seu iPhone ou Android do bolso e 
utiliza sua interface; provavelmente um número infinitamente maior do que 
o número de vezes que você viu um comercial de alguma das marcas que 
criaram esses sistemas operacionais. 
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Ry Google play | unicoms 
ç: t d 


Figura 5.6: Caso você busque algo na Google Play Store sem digitar nada no 





campo, o sistema busca automaticamente pelo termo “Unicórnio. 


Os pequenos detalhes das interfaces podem dizer muito sobre a person- 
alidade de uma marca. Quando você digita um password incorreto no seu 
MacOS ou no seu iOS, a janela sacode de um lado para outro, como se fosse 
uma pessoa balançando a cabeça negativamente. Não há a necessidade de 
uma mensagem de erro formal dizendo que “você digitou o seu password in- 
corretamente”. Afinal, isso soaria muito mais frio do que a divertida animação 
criada pelos designers da Apple. 





Algumas marcas preferem ser mais explícitas na hora de expressar sua 
personalidade, usando o próprio texto da interface para introduzir momentos 
de descontração na experiência. 


108 


Casa do Código Capítulo 5. A beleza dos pequenos detalhes 





paigns Lists Reports Autoresponders Account v Search Hels Q 





Figura 5.7: Você sabe onde você está? Você está na SELVA, Ben. 


Um dos papéis do UX designer quando está desenhando interações é o 
de identificar oportunidades de prestar atenção aos detalhes. Quem trabalha 
diretamente com testes de usabilidade sabe o quão gratificante é ver a reação 
dos usuários a um detalhe que você pensou com cuidado na hora de colocar 
na interface. 

No fim das contas, é a soma desses pequenos momentos de surpresa e 
de boa usabilidade que faz com que as pessoas se apaixonem pelos produtos 
que usam e se tornem fiéis a uma marca. E você, como UX designer, tem a 
possibilidade de melhorar a vida das pessoas, uma interação de cada vez. 





GOSTA DESSE ASSUNTO? 


Se você tem interesse em aprender mais sobre os temas deste capítulo, 
acesse http://fabricio.nu/detalhes para ver mais referências. 
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CAPÍTULO 6 


A importância dos microtextos 


Há alguns anos, falava-se muito sobre o fato de que usuários não leem na 
web. Mas convenhamos, isso era em uma época em que grande parte das in- 
terfaces digitais (majoritariamente “sites”) utilizavam grandes blocos de texto 
para comunicar mensagens aos usuários. Talvez uma herança das revistas im- 
pressas, cartilhas ou manuais de instrução, onde se parte do pressuposto de 
que o usuário está disposto a ler textos em profundidade. 

Anos depois: mobile. Uma mudança de paradigma que afetou não apenas 
a forma como os sistemas são desenhados, mas também a maneira como os 
usuários se comportam ao interagirem com eles. 

Do ponto de vista do sistema: interfaces extremamente pequenas, com 
espaço limitado para texto e um tipo de interação muito mais curta, breve, 
em pequenas doses. 

Do ponto de vista do usuário: uso muito mais fragmen- 
tado de tecnologia no decorrer do dia (150 vezes, em média, 
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de acordo com o site http://tech.firstpost.com/news-analysis/ 
smartphone- users- check-their- phones-an-average- of-150-times-a-day-86984. 
html), o hábito do multitasking e um nivel de concentração muito diminuído 
sobre o que está sendo feito. 

Tendo isso em vista, é natural que as pessoas estejam muito menos dis- 
postas a “ler” interfaces. 

Daí surge o termo “microtexto” (“microcopy” em inglês). Na prática: a 
arte de conseguir transmitir uma mensagem em pequenos fragmentos, num 
espaço limitado de texto, com concisão, clareza e personalidade. Pode ser 
o nome de um botão, uma mensagem de erro ou sucesso, uma linha de in- 
strução exibida acima de um formulário, um tooltip de ajuda - qualquer texto 
de interface. 


Um bom exemplo para começar? 


Like - Comment - Share B 741 
É) 6,662 people like this. Top Comments + 
Unlike - Comment - Share B 741 
g^ You and 6,662 others like this. Top Comments + 


Figura 6.1: O link de ‘Like’ do Facebook: microtexto do começo ao fim. 


O “Curtir” do Facebook. Repare como a ação inicial é descrita somente 
em texto. Quando o usuário clica, o feedback é transmitido também somente 
em texto (“Like vira “Unlike”). 

E para desfazer a ação? Somente texto, de novo. 

É interessante observar o uso de microtexto sob dois aspectos: um mais 
funcional e outro mais emocional. 

O aspecto funcional é o fato de existir uma ação simples na qual todos 
os estados são transmitidos com clareza ao usuário. Sem erro. Sem ruído ou 


ambiguidade. 
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Já o aspecto emocional é um pouco mais abstrato, naturalmente. A ação 
escolhida pelo Facebook foi “Curtir”, por algum motivo. É o verbo que mais 
combina com a personalidade leviana da rede social. Imagine se fosse “Legal”. 
Imagine se fosse “LOL” ou “Adorar”. Talvez você achasse o Facebook muito 
mais pegajoso do que já acha. Para cada país em que o produto é traduzido, 
o Facebook escolhe o verbo que funciona melhor culturalmente dentre o seu 
público-alvo. 


20090 


Don't Don't 184 


aa move move KUDOS 


Figura 6.2: Já o serviço de blogging Svbtle preferiu chamar o seu botão de 
‘Kudos’; mais alinhado com sua personalidade. 


O microtexto ajuda não apenas o usuário a entender o que está aconte- 
cendo no sistema, mas também a formar em sua cabeça a percepção que ele 
tem daquele produto/marca. 


6.1 (O VALOR FUNCIONAL DOS MICROTEXTOS 


Além de explicar uma ação (“cadastrar”), um microtexto pode ser usado para 
orientar o usuário na realização de uma tarefa (“sua senha deve conter no 
mínimo 6 caracteres”) ou dar feedback sobre uma ação que ele realizou (“sua 
conta foi criada com sucesso”). 

Também é possível usar microtextos para antecipar necessidades, anseios 
ou preocupações que o usuário terá ao realizar determinada tarefa. Veja 
o exemplo a seguir, citado no artigo de Joshua Porter (http://bokardo.com/ 
archives/writing- microcopy) . 
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Designing for the Web 


A Practical Guide to Desigr 
explanations of the core pri 





relation to the web, and the 


the ordering process you encounter a 


illustrations, full colour ph: 


problem please contact us) going in the right direction 
EJ z me va] studies where appeau 1 
theory has been put into pr 





Na página de compra do livro, o autor adicionou uma linha de texto que 
é crucial para quem está considerando efetuar a compra: “as transações uti- 
lizam PayPal, mas você não precisa ter uma conta para comprar esse livro”. 

Isso antecipa uma das principais preocupações que passam pela cabeça 
das pessoas quando elas veem o logotipo do PayPal (“ih, eu não tenho uma 
conta lá”) e evita que elas abandonem o fluxo por causa disso. 
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Figura 6.3: Exemplo de antecipação no formulário de criação de um novo 
Tumblr. 


Em seu livro mais recente (http://microinteractions.com) , Dan Saffer 
aborda o assunto “Microcopy” e da algumas dicas úteis na hora de escrever 
esse tipo de texto: 


e Evite nomes de ações muito vagos, como “Enviar”. O que acontece de- 
pois que o usuário “Envia” os dados do formulário? Será que o nome 
do botão não pode explicar isso para o usuário? 


e Otexto de instrução é absolutamente necessário? Você não precisa adi- 
cionar um “Por favor, faça login” acima de um formulário de login, por 
exemplo. 


e Quando o texto é muito longo e precisa ser truncado na interface, tenha 
certeza de que o usuário consegue ler o texto completo facilmente. 


e Teste seus textos com usuários reais. Mostre uma interação com micro- 
texto para eles e peça para eles dizerem em voz alta o que acham que 
acontecerá ao clicarem ou interagirem. 


* Use linguagem humana, não de sistema. “Postado há 3 horas” é muito 
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mais fácil de entender do que “postado em 04/03/2014 às 14h33” - um 
detalhe que acaba passando batido em muitos produtos por aí. 


6.2 O VALOR EMOCIONAL DOS MICROTEXTOS 


Esses dias preenchi minha declaração de imposto de renda aqui dos EUA us- 
ando a ferramenta TurboTax. Foi uma experiência tão simples e tão cuida- 
dosamente pensada, que quando terminei eu queria sair contando para todos 
os meus amigos UXers como tinha sido. Eles, obviamente, já estavam acos- 
tumados com o produto. 

Preencher a declaração de imposto de renda não é uma tarefa breve (são 
muitos e muitos passos), mas o interessante da experiência do TurboTax é 
como eles usam microtextos para encorajar os usuários a seguirem em frente. 
Eles “celebram” cada pequena conquista sua à medida que você vai percor- 
rendo cada um dos mais de 50 passos do formulário. O resultado? Durante 
o processo, fiquei muito mais tranquilo do que achei que ficaria antes de 
começar. 


Track my refund 


Next step: 

Keep watching your email. We'll send you 
another message when your returns are 
accepted or rejected. 


Figura 6.4: Microtexto no TurboTax.com depois que você envia a declaração: 
imposto de renda sem complicação. 


Em muitos produtos, o microtexto representa também uma ótima opor- 
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tunidade para expressar a personalidade da marca. Apesar da limitação de 
pixels e caracteres dos microtextos, a escolha certa das palavras pode ajudar a 
transmitir alguns dos valores da marca para seus usuários (como o exemplo 
do Facebook “Like” citado anteriormente). 

O Mailchimp.com, por exemplo, usa cada oportunidade que tem para ex- 
pressar sua personalidade. Eles inclusive publicaram um guia sobre tom de 
voz (http://voiceandtone.com) para quem costuma redigir e-mail marketing. 


6.3 COMUNIQUE BENEFÍCIOS, NÃO FUNCIONALI- 
DADES 


Se você explica para as pessoas o porquê de você estar pedindo para elas faz- 
erem algo, é muito mais provável que elas aceitem sua sugestão. É um pequeno 
truque de texto mas que pode ter grande impacto no sentido de encorajar as 
pessoas a tomarem alguma ação. 

Em redação, há sempre dois elementos comuns: funcionalidades e bene- 
fícios. O primeiro é sobre o que um produto faz. O segundo é sobre o que ele 
permite você fazer. 


OH qQ BROWSE - SIGNUP LOGIN 


“ 
x 


E” =< 


Fiñd a Dido o sta) 


_ Rentfrom people in over RO cups and1 ou Ss. wc oe hi, 





C\ 


Repare no exemplo da pagina inicial do airbnb.com. Em vez de falar “so- 
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mos a maior rede de aluguéis de imóveis do mundo” ou “aluguel de imóveis 
sem complicação”, a primeira frase que o usuário vê ao chegar no site é “en- 
contre um lugar para ficar”. 

É uma diferença sutil, mas mudar o foco de o que o produto faz para o 
que o produto vai permitir que o consumidor faça é mais uma forma simples 
de colocar o consumidor no centro e facilitar o entendimento da proposição 
de valor do site em questão. 


6.4 FALE A LINGUAGEM DOS SEUS USUÁRIOS 


As pessoas respondem bem a palavras, frases e tons de voz dependendo da 
própria personalidade delas, e não porque você escolheu a palavra certa ou 
errada. 

É nessa hora que criar documentos de personas pode ser útil para o seu 
projeto. As personas são uma espécie de “retrato” de quem é o público-alvo do 
seu produto. Conhecer bem o perfil do usuário ajuda a marca a se comunicar 
de uma forma que soe natural e lógica para eles. 

Você não diz para uma criança “essa afirmação é ilógica e, portanto, in- 
válida” A mensagem que você quer passar pode até ser essa, mas o tom de voz 
usado deve ser completamente diferente para que ela entenda. Você diz “não 
é assim que funciona, deixa eu te explicar”. Um jeito muito mais humano de 
tratar a comunicação com seu usuário. 


a 
fohmowi JOHNSON'S® baby = ) JOHNSONS 
baby HORA DO BANHO ; e HORA DOSONO | CRESCIDINHOS 


Veja o exemplo do site da Johnson's Baby. No menu, a linguagem escol- 
hida (e até as cores, que também contribuem para reforçar a voz da marca) 
faz parte do universo das mães que estão navegando no site. 
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emotion me. 


Veja seu site: emotion.me/fabricioemariazinha 


Painel Planejamento ~ Lista de Presentes v Meu Casamento ~ Meu 


O Grande Dia 

Pais e Padrinhos 

Convide Amigos nd 
Convidados (RSVP) 


cera uteceecasu rates 


11/05/2015 
Fabricio Mariazinha São Paulo 7 





Já o emotion.me, site especializado em ajudar noivos a planejarem o casa- 
mento, usa expressões como “O Grande Dia” na hora de apresentar o menu 
para o usuário. 

No fim das contas, adequar sua linguagem para o universo do seu público- 
alvo ajuda a criar uma experiência do usuário que seja ao mesmo tempo mem- 
orável e fácil de entender. 


6.5 MANTENHA OS TEXTOS CURTOS 


O foco aqui é o “micro” dos “microtextos": mantenha seus textos curtos. 
Clientes costumam sempre pedir mais palavras em uma página. Mas o texto 
sempre pode ser mais curto. E na maioria dos casos, textos mais curtos geram 
melhores resultados. Sempre que possível, reduza. 
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(CASE sEnSiTiVe) 


Figura 6.5: Password é 'sEnSíVeL a maiúsculas e minúsculas. 





Texto é uma peça fundamental da experiência do usuário, às vezes negli- 
genciada por profissionais de UX depois que o wireframe foi entregue. 

Acompanhar o desenvolvimento dos textos que serão exibidos na inter- 
face é importante não só para garantir boa usabilidade, mas também para 
ter certeza que texto e imagem estão trabalhando juntos para transmitir uma 
mensagem alinhada com o tom de voz da marca. 
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CAPÍTULO 7 


Construindo uma biblioteca de 
padrões 


Bibliotecas de padrões, no universo de User Experience Design, são galerias 
que contêm os principais elementos interativos que compõem a interface de 
determinado produto - seja ele um site, um aplicativo ou qualquer outro pro- 
duto digital. 
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A criação de bibliotecas de padrões é uma forma de colecionar as soluções 
de design que aparecem várias vezes dentro de um mesmo site. Cada solução 
é criada para resolver um problema de design. As galerias de fotos, por exem- 
plo, são uma solução para exibir e permitir que o usuário navegue por uma 
série de imagens que fazem parte de um mesmo tema. 

Como os problemas de design costumam aparecer mais de uma vez den- 
tro do mesmo produto, faz sentido que o designer e o desenvolvedor reuti- 
lizem as soluções em vez de reinventarem a roda cada vez que o problema 
aparecer novamente. 

O bom UX designer tira proveito disso. Não é preciso desenhar nova- 
mente um fluxo de “enviar por e-mail” ou de “cadastro” a cada projeto em 
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cuja matriz de escopo esses itens aparecem. A partir do momento em que você 
tem uma biblioteca de padrões à sua disposição, passa a poder reaproveitar 
esses elementos e fluxos com o mínimo de ajustes em outros trabalhos. Isso 
também dá uma grande agilidade na execução do projeto. 


Elementos encontrados comumente em bibliotecas de padrões são: 


e Texto 

* Estrutura da página 

e Tabelas 

e Slideshows 

* Elementos de navegação 
e Botões de redes sociais 

e Ferramenta de busca 

e Listagem de artigos 

e Galeria de fotos 

e Módulo de links relacionados 
e Carrosséis 


e Botões de ação primária e secundária 
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Featured Pattem 
Carousel 





Carousel item 1 Carousel item 2 Carousel item 3 
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit 
amet adipiscing elit amet adipiscing elit amet adipiscing elit 


Figura 7.1: Exemplo de um carrossel, elemento frequentemente encontrado 
em bibliotecas de padrões. 


7.1 AS VANTAGENS EM TER UMA BIBLIOTECA 


Consistência na experiência do usuário 


Projetos muito grandes costumam ser desenhados e desenvolvidos por uma 
porção de profissionais diferentes. Algumas vezes, um time é responsável 
por desenhar a homepage, enquanto outro time está focado na ferramenta de 
busca, por exemplo. Muitas vezes, essas diferentes frentes estão trabalhando 
em paralelo. Mas para o usuário é uma coisa só: ele precisa sentir que tanto a 
homepage quanto a ferramenta de busca fazem parte do mesmo produto. 

Quando a experiência é consistente e os elementos interativos se com- 
portam de maneira similar, o usuário passa a saber o que esperar do sistema a 
cada nova ação que ele toma. Quando não há consistência, o usuário precisa 
“reaprender” como interagir com o site a cada novo tipo de interação que é 
introduzido na experiência. E isso, é claro, contribui negativamente para a 
satisfação do usuário, para a usabilidade do sistema e para os resultados de 
negócios da empresa que criou o produto. 
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Reutilização dos elementos pelo time 


Cada vez que um designer cria um novo padrão de interação, isso gera um 
novo custo para a empresa que está desenvolvendo o produto. Afinal, o dire- 
tor de arte precisa trabalhar no layout desse novo elemento, os programadores 
front-end precisam fazê-lo funcionar etc. Por isso, reutilizar padrões de inter- 
ação pode ser um jeito inteligente de reduzir custos no projeto, garantir uma 
data de entrega plausível e evitar que os times gastem horas a fio recriando 
soluções que já existem. 

É importante, porém, que a biblioteca esteja facilmente acessível a qual- 
quer profissional do time, que todos saibam de sua existência e que sejam 
encorajados a usar os elementos ali presentes sempre que possível. 


Manutenção 


Ter uma biblioteca de padrões de interação que é utilizada por todos os 
designers e desenvolvedores também faz com que a manutenção seja mais 
simples. Quando os elementos são programados da mesma forma, muitos 
blocos de código podem ser reutilizados, reduzindo a carga de trabalho dos 
programadores. 

É possível também mensurar a eficácia dos elementos da biblioteca de 
padrões e trabalhar em cima deles para que sua performance seja otimizada. 
Se um determinado modelo de galeria de fotos está performando abaixo do 
esperado (os usuários não estão clicando nas imagens seguintes para explo- 
rar a galeria), é possível refiná-lo e otimizar o seu funcionamento uma vez só, 
dentro da biblioteca de padrões. A partir do momento em que as melhorias de 
design e código são feitas na galeria de fotos padrão, com uma simples atual- 
ização de código todas as galerias de foto que aparecem no site todo também 
são atualizadas para a nova versão. 

Para isso, é importante que os desenvolvedores trabalhem com o conceito 
de elementos globais no código do produto: em vez de inserir manualmente 
o código da galeria de fotos em todas as páginas em que uma delas aparece, 
é muito mais fácil ter um include que está sendo alimentado por um modelo 
global de galeria. 

É lógico que as bibliotecas de padrões começam a fazer mais sentido para 
projetos maiores ou times em que designers e desenvolvedores estejam tra- 
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balhando em paralelo em diferentes partes da interface. Se você está criando 
um site de duas ou três páginas, pode ser que não valha a pena o trabalho de 
criar, polir e manter uma galeria de padrões separadamente. 

Outro caso comum é o de empresas que possuem diversos produtos para 
o consumidor final. Veja o caso do Google: muitos elementos de navegação 
(como paginação, botão de +1, galerias de imagens etc.) são completamente 
aproveitados em produtos diferentes, como o Gmail, Google Plus, Google 
Maps. Além de tornar a experiência do usuário mais consistente e otimizar 
a usabilidade dos produtos, essa padronização também permite que diversos 
produtos pareçam fazer parte de uma mesma família - contribuindo assim 
para a percepção que o usuário tem da marca. 

Confira dois exemplos de bibliotecas de padrões de grandes marcas, pub- 
licados online para quem quiser consultar. 

Starbucks: http://www.starbucks.com/static/reference/styleguide/ 


Yahoo!: https://developer.yahoo.com/ypatterns/ 


7.2 A BIBLIOTECA COMO ENTREGÁVEL FINAL DO PRO- 
JETO 


Um movimento recente das empresas que trabalham com projetos de grande 
porte é o de considerar a biblioteca de padrões o entregável final de determi- 
nado projeto. 

Pense em um site que possui mais de 50 modelos de paginas diferentes; se- 
ria insano estruturar, layoutar e desenvolver todas as páginas separadamente 
e tê-las como o entregável final do projeto. O que muitos UX designers fazem 
é desconstruir os elementos que compõem essas 50 páginas e categorizá-los 
dentro de uma biblioteca de padrões - especialmente quando as páginas pos- 
suem muitos elementos compartilhados. 

Brad Frost, programador front-end que passou anos trabalhando em 
agências digitais nos EUA, recentemente introduziu para a comunidade de 
UX designers e desenvolvedores o conceito de “Design Atômico”. Ele parte 
da mesma premissa que deu origem às bibliotecas de padrões muitos anos 
atrás: o fato de que, se você desconstruir as páginas de um site, é possível 
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chegar nas menores unidades de design possíveis: os “átomos” do design de 
interação. 





ATOMS MOLECULES ORGANISMS TEMPLATES PAGES 


Figura 7.2: Modelo-metáfora de Brad Frost considera átomos, moléculas, or- 
ganismos, templates e paginas no design web. 


Segundo o esquema proposto por Brad Frost, é possível focar os esforços 
dos designers e desenvolvedores em construir os átomos, moléculas e organ- 
ismos que compõem o produto, em vez de focar nas páginas completas. No 
final do projeto, em vez de entregar as 50 páginas, o que ele propõe é a en- 
trega de um único link (em HTML, no caso de um site), que ilustra como 
esses elementos de interação se comportam. 

A partir daí, fica mais fácil para a empresa montar as páginas em questão: 
basta que ela reúna esses diversos elementos de um jeito que faça sentido para 
os usuários (primeiro o header, depois o campo de busca, depois o título da 
página, depois um bloco de texto, depois uma galeria de fotos etc.). 
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GOSTA DESSE ASSUNTO? 


Se você se interessa pelo tema, leia a documentação que Frost pub- 
licou em seu site e veja alguns exemplos de produtos que foram con- 
struídos inteiramente utilizando o conceito do design atômico: http: 
//bradfrostweb.com/blog/post/atomic- web-design. 











73 MAIS PADRONIZAÇÃO NAO SIGNIFICA MENOS 
CRIATIVIDADE 


Hoje em dia, existem diversas bibliotecas de padrões disponíveis online para 
consulta. Sites como o Pattern Tap (http://patterntap.com) catalogam padrões 
de interação de diferentes aplicativos, sites e produtos em um único lugar, per- 
mitindo inclusive que o visitante filtre os padrões por tipo (menus, galerias, 
paginação, formulários etc.). 

Mas, apesar das inúmeras vantagens em se utilizar bibliotecas de padrões 
e da facilidade em encontrar referências na web de padrões que funcionam 
bem, é importante estar atento a um erro comum de alguns times: pensar que 
uma única solução de design pode resolver problemas de design diferentes de 
empresas diferentes. 

Às vezes, um modelo de paginação que funciona bem para a página de 
resultados de busca da Amazon pode não funcionar tão bem para uma ga- 
leria de imagens como o Pinterest. Diferentes contextos exigem diferentes 
pensamentos de design, que eventualmente levam a diferentes soluções de 
interface. 

Isso sem contar que você pode estar perdendo a oportunidade de criar 
um modelo de interação original, icônico e que expresse a personalidade da 
sua marca. 
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Figura 7.3: A paginação do Google foge do convencional e cria um design 
icônico para a marca. 


Por isso, ao encontrar um padrão de interação em algum site, é impor- 
tante examiná-lo nos mínimos detalhes para entender qual foi o problema 
que levou àquela solução. O resultado pode ter ficado incrível no site X, mas 
na hora de transportar a mesma solução para o seu produto você pode acabar 
causando um desastre em sua usabilidade. 

Será que o problema daquela empresa era o mesmo que você está ten- 
tando resolver para o seu produto? Quais mudanças você poderia fazer para 
deixar a solução customizada para sua interface e fazer com que ele resolva 
os problemas reais dos seus usuários? 

Essas perguntas não são fáceis de serem respondidas, mas uma boa opção 
para chegar a essa resposta é testar a interface com usuários reais do produto, 
simulando uma situação real de uso. O próximo capítulo fala justamente da 
etapa de pesquisa: a hora do projeto em que é preciso deixar sua confortável 
cadeira de lado e testar o produto com quem mais importa. 





GOSTA DESSE ASSUNTO? 


Se você deseja saber mais sobre o tema deste capítulo, acesse http: 
//fabricio.nu/padroes para ver links de bibliotecas de padrões online. 
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CAPÍTULO 8 


Testando com usuários 


Na figura 8.1 temos a interface do aplicativo da British Gas para smartphones. 
O objetivo desta tela é fazer com que o próprio usuário consiga fazer a leitura 
do medidor de gás de sua casa, para que a conta do mês seja processada pela 
empresa. 

A tarefa é simples: o usuário só precisa olhar o número que aparece no 
medidor de gás que está instalado em sua casa e entrar o mesmo número na 
interface do aplicativo. 

Só que repare no detalhe: no canto superior direito há um atalho para que 
os usuários consigam ligar a luz do flash do celular. Uma espécie de interrup- 
tor, com “on/off”, que liga a luz do flash e ilumina o ambiente onde o usuário 


está. 
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Gas 


61, Forton Avenue, ou 
Bolton BL2 6JE = 
Customer number 
pe 850000002012 





$, Enter your gas reading here 





Cancel Next 


A ferramenta foi adicionada, obviamente, porque os medidores de gás 
costumam ser instalados em locais não muito iluminados dentro das casas dos 
usuários: embaixo da pia, em um porão escuro, ou em algum lugar fechado 
perto da caixa de eletricidade e de água. Nada mais justo do que permitir que 
o usuário ilumine o ambiente com a própria luz do smartphone que já está 
em suas mãos. 

Mas apesar de a ideia parecer um tanto óbvia depois de pronta, chegar até 
ela não é tão simples assim. Esse é o tipo de ideia que surge apenas quando 
os designers têm total consciência e entendimento de qual o contexto de uso 
do aplicativo. Provavelmente, em um dos testes feitos com usuários reais no 
contexto real de uso do app, alguma pessoa deve ter carregado uma lanterna 
consigo na hora de ir até o porão mostrar para o designer como é que ela faz 
para ver o número do medidor de gás. 

No dia a dia de criação e desenvolvimento de interfaces digitais, é muito 
comum que os membros da equipe passem longas horas do dia sentados em 
sua mesa rabiscando ou layoutando como determinada tela deve funcionar. 
Só que existem algumas ideias que só surgem quando você conhece em pro- 
fundidade quem são os seus usuários, do que eles precisam e qual o real con- 
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texto de uso daquilo que está sendo criado. 
Além de gerarem novas ideias de funcionalidades para os produtos, re- 
alizar pesquisas com usuários podem ser úteis para: 


e Validar se a solução de design que você criou realmente funciona; 
e Encontrar possíveis problemas de usabilidade na interface; 

e Testar se a solução é realmente útil para as pessoas; 

e Observar a reação das pessoas à medida que usam o produto; 


e Descobrir outras necessidades dos usuários que você nem sabia que 
existiam; 


e Validar se a pessoa realmente usaria aquele produto em sua rotina ou 
se ela preferiria usar outros métodos ou ferramentas para resolver o 
mesmo problema. 


8.1 SAIA DA SUA MESA COM MAIS FREQUÊNCIA 


Veja a seguir um trecho de uma entrevista com Jared Spool, CEO da User In- 
terface Engineering e coautor de alguns livros sobre User Experience e Testes 
de Usabilidade. Em uma de suas respostas, Spool explica que testes de usabil- 
idade são mais baratos e simples de serem feitos do que se imagina. 


Entrevista com Jared Spool 


“Alguns times de desenvolvedores parecem procurar por formas mais 
baratas e rápidas de validarem seu design. Usabilidade é frequentemente perce- 
bida como sendo muito cara. Você acha que os testes de usabilidade devem ser 
barateados? Perguntando melhor: teste de usabilidade, hot or not? 

Um teste de usabilidade, em sua forma mais básica, custa basicamente 
nada. É um processo simples. Você senta do lado de alguém e o assiste experi- 
mentando seu design. Qualquer custo adicional vem da tentativa de adicionar 
rigor ao processo. Rigor não precisa ser caro, mas pode ser caro. 

Pense que é como pintar uma casa. Uma pessoa pode fazer tudo pratica- 
mente sozinha, economizando uma boa quantia, mas provavelmente isso vai 
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tomar muito tempo e, sem as ferramentas adequadas, ela não vai produzir um 
resultado de alta qualidade. Mas vai ter pintado a casa. 

A questão é quanto valem o tempo e a qualidade. Há uma relação entre 
quanto você investe e a qualidade e velocidade que você vai ter de volta. Compre 
uma escada, uns pincéis e rolos de melhor qualidade, tintas melhores e peça 
a ajuda de algum estudante colegial desempregado, e você terá uma pintura 
melhor em sua casa. 

A mesma coisa acontece com testes de usabilidade. Investimentos in- 
teligentes aumentam a qualidade. Mas há uma coisa que difere de pintar uma 
casa: pode ser um erro contratar alguém para testar para você. 

O principal benefício de qualquer projeto de teste de usabilidade não é o 
relatório de recomendações que é entregue no final. Nossa pesquisa mostra que 
o benefício é a exposição que o time tem ao observar usuários reais utilizando 
seu design. Quanto maior essa exposição, melhores são os produtos entregues. 

Se você contrata alguém para fazer o seu teste, bem, é mais ou menos como 
contratar alguém para curtir suas férias - a tarefa é feita, mas você perde a 
melhor parte. Então, o maior investimento em testes de usabilidade não é o 
dinheiro - que até pode ser não muito caro. É o tempo. Nossa pesquisa mostra 
que as equipes das organizações mais eficazes gastam pelo menos duas horas 
a cada seis semanas observando usuários interagirem com seus projetos. Cada 
membro da equipe. 

Ea experiência se paga muito rapidamente. O time agora sabe como é usar 
o design. Eles sabem quais mudanças tiveram o impacto que eles esperavam, e 
quais delas nem foram notadas. E eles veem como alguns problemas pequenos 
e irritantes podem arruinar soluções consideradas inovadoras. 

É muito barato começar a praticar testes - se a dúvida é fazer ou não o 
investimento. Agora, se você estiver preocupado com os gastos, eu recomendo 
que você faça um produto realmente de baixa qualidade. Sempre haverá uma 
solução mais barata. (E é interessante observar que, se você quiser realmente 
fazer um produto de baixa qualidade, você consegue fazer muito rapidamente, 
também.)” 

Muito interessante a metáfora que Jared fez sobre a pintura da casa. 

As grandes agências e estúdios digitais já enxergaram o valor dos testes 
com usuários para os negócios e passaram a incorporá-los naturalmente 
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como parte do processo de criação de produtos digitais. 

Existe uma série de métodos de pesquisa com usuários que os UX design- 
ers costumam realizar: pesquisas quantitativas, entrevistas em profundidade, 
focus groups, testes de usabilidade, testes A/B, eyetracking, shadowing, diário 
de uso continuado - entre outros. Nas próximas seções, você confere mais de- 
talhes sobre dois métodos muito comuns no processo de desenvolvimento 
de interfaces: os testes de usabilidade e os testes A/B. Tais métodos podem 
ser utilizados tanto pelo próprio UX designer quanto por uma empresa ter- 
ceira especializada no assunto. Ou então, na ausência deles, por praticamente 
qualquer membro do time que esteja disposto a investigar mais sobre o com- 
portamento das pessoas. 


8.2 TESTES DE USABILIDADE 


Testes de usabilidade têm por objetivo verificar a facilidade que o software 
ou site possui de ser claramente compreendido e manipulado pelo usuário. 
São, por definição, qualitativos - ou seja, focam mais na qualidade e profun- 
didade dos resultados do que necessariamente no número de usuários que 
participam. 
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Veja a definição de Testes de usabilidade publicada na plataforma 


Corais.org (http://corais.org/node/97) : 

“Usuários potenciais da interface são incentivados a usá-la num ambiente 
monitorado, onde suas ações são gravadas e anotadas. Um profissional facili- 
tador fica ao lado do usuário para guiá-lo pelo teste e incentivar que verbalize 
seus problemas e desconfortos. 

Numa sala separada, podem estar outros membros da equipe de design 
da interface para observar o teste ao vivo sem interferir no comportamento 
do usuário. Após o teste, os dados são analisados e é gerado um relatório con- 
tendo recomendações para a equipe de design e o consultor fica à disposição 
para discutir soluções para os problemas encontrados. 

Com base em pesquisas de perfil dos consumidores, é recrutado um 
número reduzido de usuários potenciais, representando os principais grupos 
de perfis. Cada usuário testará a interface separadamente, numa sessão que 
dura aproximadamente 1 hora. Ao final da sessão, ele deve receber um brinde 
para compensar o tempo dispendido. 

No início do teste, o facilitador explica por que a empresa está pro- 
movendo os testes e, em seguida, apresenta a interface, pedindo a opinião 
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do usuário sobre aspectos subjetivos da interface, como beleza, atratividade 
e etc. Depois disso, o usuário é requisitado a realizar determinadas tarefas, 
como por exemplo “descobrir se o aparelho X possui uma funcionalidade Y”. 
Ao final, é repassado ao usuário um questionário de satisfação para registrar 
seu conforto ao realizar as tarefas. 

As tarefas que o usuário realiza são escolhidas com base na análise 
cruzada de log (estatísticas de navegação), de e-mails de suporte e do atendi- 
mento online. Essas fontes já possuem dados que servem como pistas para 
encontrar os principais problemas de usabilidade” 

Entre os objetivos mais comuns dos testes de usabilidade, estão: 


* Averiguar a aceitação de um novo produto no mercado: será que as 
pessoas estão dispostas a começar a usar o seu produto para resolver o 
problema que elas têm? 


e Avaliar a usabilidade do produto: as pessoas conseguem completar a 
tarefa sem dificuldades, em um tempo aceitável e com baixo nível de 
esforço cognitivo? 


* Comprar a usabilidade de várias versões diferentes da mesma interface: 
será que os usuários têm mais facilidade de utilizar botões ou gestos 
para realizar uma tarefa? Será que uma versão funciona melhor do que 
a outra? Testes de usabilidade podem ser úteis para entender o que 
funciona e o que não funciona em cada uma das versões testadas. 


e Identificar o motivo que leva as pessoas a usarem ou a abandonarem 
o produto: será que estão tendo dificuldade em um passo específico 
do fluxo? Será que a interface não está fornecendo as informações su- 
ficientes para o que o usuário complete a tarefa? Será que eles estão 
tendo dificuldade em entender o que está acontecendo com o sistema 
à medida que interagem com o produto? 


e Coletar opiniões e ideias de melhorias: durante os testes, os usuários 
fazem muito comentários sobre o que gostam e o que não gostam em 
determinada solução de interface, em alguns casos podendo até fazer 
sugestões de funcionalidades que eles gostariam de ver naquele pro- 
duto. 
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e Medir a performance do produto: quanto tempo as pessoas levam para 
concluir a atividade? Quantos passos são necessários? Qual a porcent- 
agem das pessoas que conseguem efetivamente realizar a tarefa com 
sucesso? 


Após uma sessão de testes, é comum que o UX designer (ou a empresa 
terceira contratada para realizá-los) crie um relatório com os principais pon- 
tos investigados e as principais melhorias a serem feitas no produto. Depois, 
é comum que eles se reúnam com todos os membros do time para pensar em 
soluções para aqueles problemas. 

A cada novo ciclo de testes-análise-soluções, o produto vai amadurecendo 
e ficando mais fácil de usar. Algumas empresas realizam os testes no decor- 
rer do processo de desenvolvimento e antes mesmo de o produto ser final- 
izado, permitindo que essas melhorias sejam implementadas logo na primeira 
versão do produto. Outras empresas preferem uma abordagem diferente: 
primeiro lançam o produto e depois testam com usuários para conseguirem 
capturar as melhorias necessárias para as versões futuras. Os dois méto- 
dos são válidos e o mais importante é que eles colocam as necessidades dos 
usuários como foco central das soluções do design. Aliás, é esse tipo de inicia- 
tiva que coloca o “U” no nome “User Experience Design": se o seu design não 
leva em conta o usuário, então talvez você não esteja praticando UX Design, 
mas apenas Design. 


8.3 DESCULPAS COMUNS PARA NÃO TESTAR COM 
USUÁRIOS 


Apesar de os testes com usuários serem comprovadamente eficazes para de- 
senvolver produtos que sejam fáceis de usar, muitas empresas ainda negligen- 
ciam essa etapa do processo e acabam criando produtos baseados apenas na 
intuição dos designers. 

Intuição é um elemento bastante válido na equação, mas não pode ser o 
único. Um dos pilares do User Experience Design é o fato de que você não 
é o usuário. E se você não é o seu usuário, é certamente difícil prever o que 
ele vai pensar, sentir e desejar na hora em que estiver com o seu produto nas 
mãos. 
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Obviamente, existe a questão dos custos e do prazo. Incorporar testes 
com usuários dentro do processo de Design tem um certo impacto nas ho- 
ras gastas e no prazo final da entrega do produto. A verdade é que muitas 
vezes é preferível adiar o lançamento do produto em algumas semanas, mas 
ter certeza de que a solução é realmente simples de usar — testada e aprovada 
pelos próprios usuários do site. 

Veja a seguir uma lista com as 10 desculpas mais comuns 
que as pessoas utilizam para não fazerem testes com usuários, 
segundo o site Cardinal Path (http://www.cardinalpath.com/ 
top-10-lame-excuses-for-not-doing-usability-testing) : 

Eu não tenho um laboratório de usabilidade. Você não precisa de um 
laboratório completo, com equipamentos de última geração e com sala de es- 
pelho. De fato, você nem quer ter um. Laboratórios muito elaborados podem 
deixar os participantes nervosos e influenciar no resultado. Um lugar mais 
casual traz melhores resultados para os testes. 

Eu não tenho um software de gravação de tela. Bom, existem softwares 
gratuitos disponíveis online que fazem isso, ou então versões “Trial” de soft- 
wares pagos que você pode usar por alguns dias. E se você não puder instalar 
um software para gravar o que está sendo testado, faça o teste mesmo assim. 
Você sempre aprenderá alguma coisa dos usuários. 

Eu não sei fazer uma análise estatística dos resultados. Não precisa. 
Testes de usabilidade são qualitativos, por natureza. Você está em busca de 
insights, não de estatísticas. 

Eu não conheço participantes suficientes. Já que você não está procu- 
rando por estatísticas, e sim por insights, teste com 3-5 usuários. Na verdade, 
testar com 1 usuário já é infinitamente melhor do que testar com o usuário. 

É difícil encontrar usuários no perfil demográfico que estou procu- 
rando. Então teste com os participantes que mais se aproximem do perfil. 
A coisa mais importante é testar com pessoas que usariam o serviço. O perfil 
demográfico pode ser aproximado. 

Meu produto ainda não está finalizado. Exato. Esse é o ponto. Quanto 
antes você testar, melhor. Teste em protótipos. Teste em wireframes. Teste no 
verso do guardanapo. Se você esperar para testar com o produto já pronto, 
será muito mais difícil fazer mudanças nele depois do teste. 
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Eu não tenho tempo. Faça o tempo aparecer. Não precisa de muito. Se 
for preciso, faça testes remotos (por Skype ou com serviços como o usertest- 
ing.com). Você conseguirá insights em poucas horas. 

Eu não tenho budget. Então faça os testes você mesmo. Tente liberar 
tempo de outras atividades para isso. 

Eu nunca fiz antes, não tenho ideia de como aplicar um teste. Aprenda. 
Leia sobre o assunto, ou então aprenda fazendo. 

Meu produto está funcionando bem, não preciso de teste. Ok, essa de- 
sculpa quase ninguém usa, porque todo mundo sabe que qualquer produto 
pode melhorar depois dos testes. O que significa que todos os produtos pre- 
cisam de testes. 


8.4 INCORPORANDO PESQUISA COM USUÁRIOS EM SEU 
PROJETO 


É muito comum ouvir de profissionais que trabalham em agências de publici- 
dade ou empresas de desenvolvimento de software que “precisamos começar 
a fazer mais pesquisa”. 

Ou “precisamos incorporar pesquisa no processo” 

Ou “precisamos conseguir mais verba para fazer pesquisa” 

Ou “se tivéssemos mais tempo, poderíamos ter feito pesquisa” 

E então “Pesquisa” fica sempre sendo esse tabu, essa coisa intangível cuja 
importância as pessoas adoram reforçar, mas ninguém tem muita força de 
vontade de fazer. Em menos de metade dos projetos em que trabalhei houve 
mobilização suficiente para fazer algum tipo de pesquisa que envolvesse os 
usuários reais do produto. E não, isso não é exclusividade dos brasileiros: 
fora do país o índice é praticamente igual. 

Mas as coisas estão mudando. Aos poucos, mas estão mudando. Veja a 
seguir algumas questões para se pensar e para tentar conseguir incorporar 
pesquisas com usuários com mais frequência em seus projetos. 


E se a pesquisa não fosse uma etapa? 


Ao contrário do que muita gente imagina, a tal “Pesquisa” não precisa ser 
uma etapa separada, que acontece logo no começo do projeto. 
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Não precisa necessariamente ter data de início, data de término, parceiros 
contratados, CNPJ, burocracia, prancheta ou formulário. Pesquisa não pre- 
cisa ter letra maiúscula. 

Pesquisa é simplesmente pesquisa. É simplesmente você consultar o 
seu usuário final para validar uma hipótese ou teoria que você tenha. Mas 
também não obrigatoriamente; pesquisa pode ser puramente sentar com o 
usuário e conversar sobre assuntos randômicos, saber das coisas que ele tem 
feito e o que ele achou do celular novo que ele comprou na semana passada. 
Isso não deixa de ser uma forma de estar mais próximo do seu usuário. Bom, 
melhor do que passar o projeto todo sentado no conforto da sua cadeira do 


escritório. 


E se a pesquisa não fosse uma escolha 


Muitas vezes, os times se reúnem para decidir se é possível ou não realizar 
pesquisa com usuários em um projeto. Mas e se isso não fosse escolha para 
ninguém? Ao invés de tratar pesquisa como item “opcional”, considere embu- 
tir em seus custos e não dar escolha para o cliente. Se o cliente não pode optar 
entre “escopo completo com pesquisa” ou “escopo reduzido sem pesquisa”, ele 
acaba comprando o escopo do projeto, e pronto. Tenha certeza de que dentro 
desses escopos já exista uma pequena gordura de horas destinadas a isso - 
ninguém precisa saber disso a não ser o UX designer e o gerente de projetos 

Em um projeto recente do qual participei foi assim: uma manhã por se- 
mana, dois UX designers fazendo pesquisa de campo. No caso desse projeto, 
o local da pesquisa é uma das lojas da marca, onde os produtos são vendidos. 

O gerente de projetos também não teve muita escolha. Informamos para 
ele que às terças-feiras de manhã nós não estaríamos disponíveis (do mesmo 
jeito que você informa seu chefe que toda sexta de manhã você precisa chegar 
mais tarde porque vai levar sua avó na aula de capoeira). A regra era “bloquear 
o calendário no Outlook” e não se fala mais nisso. Aos poucos, a rotina do 
restante do time foi se adaptando a essas manhãs ocupadas com pesquisa, e 
depois de um tempo as pessoas já esperavam ansiosas a gente voltar para o 
escritório, querendo saber como tinha sido a pesquisa naquele dia. 
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E se os resultados não fossem tabulados 


Esse também é um vício de quem está acostumado a fazer pesquisas muito 
grandes (especialmente as que envolvem parceiros contratados). Sempre se 
espera um relatório formal, com os dados tabulados e algumas recomen- 
dações do que deve e do que não deve ser feito em relação ao design do pro- 
duto após a pesquisa. 

Mas não precisa ser assim. Nesse mesmo projeto que mencionei, no cam- 
inho de volta para a agência os UX designers já conversavam sobre o que 
aprenderam naquelas duas horas de pesquisa e já chegavam ao escritório com 
3 bullet points que resumiam os aprendizados do dia. Sem precisar de reunião 
formal, sem nem precisar sentar na mesa para passar nada a limpo: no próprio 
táxi nós já escreviamos o resumo dos resultados e na própria tarde da terça- 
feira já começávamos a compartilhar com o time o que aprendemos. 


E se a pesquisa não fosse muito planejada? 


Planejar demais a pesquisa pode significar dois riscos para o projeto. O 
primeiro deles é você gastar horas demais planejando o que vai ser pergun- 
tado, e esse superplanejamento acabar saindo caro. O segundo é você ensaiar 
demais e não fazer nunca, porque sempre vai ter algo no projeto que tem pri- 
oridade mais alta do que a pesquisa em si. 

Antes de sair para o primeiro dia de pesquisa, nós nos reunimos por 15 
minutos para combinar as regras do jogo, e o resto foi improvisação. Só vale 
tomar cuidado para não “planejar de menos” a pesquisa e invalidar os re- 
sultados por causa de algum erro primário (como entrevistar o público-alvo 
errado ou agir com parcialidade). 

Por sorte, para esse projeto nós contávamos com o apoio de uma loja da 
marca que estava ciente de que nós estaríamos por lá todas as terças-feiras 
de manhã fazendo perguntas para os vendedores e para os compradores. Aos 
poucos, fomos nos familiarizando com os vendedores e ganhando a confiança 
deles para que eles compartilhassem mais informações conosco. 


E se cada pequena decisão de design fosse validada? 


E claro que você não pode chegar para o consumidor e perguntar o que 
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ele acha do novo botão que você adicionou na semana passada. Mas como 
as pesquisas acontecem toda semana, aos poucos você vai se acostumando 
a direcionar a conversa para sondar se aquela funcionalidade na qual você 
trabalhou na semana passada teria boa aceitação ou não. Tudo com muito 
jogo de cintura, é claro, para não deturpar ou direcionar demais os resultados. 


Quais os benefícios desse “método"? 


Resumindo e consolidando tudo em uma única lista: 


e Custo de pesquisa “invisível” diluído na própria verba do projeto. 


e Nada de investir muito tempo em uma ideia maluca que depois sera 
jogada fora: em menos de uma semana uma nova ideia já pode ser 
validada com os usuários para descobrir se aquela é ou não uma boa 
ideia. 


e Os insights colhidos em pesquisa servem não apenas para validar no- 
vas ideias que nascem dentro da agência, mas também como ponto de 
partida para novos brainstorms onde o time de designers e desenvolve- 
dores criam novas funcionalidades para o produto. 


e À medida que você vai conversando com mais consumidores, é pos- 
sível criar personas para o seu projeto: uma documentação de quem é 
esse consumidor, qual o seu perfil demográfico, quais as suas necessi- 
dades, desejos e anseios quando estão buscando uma solução para seu 
problema. 


e Você acaba conhecendo um outro lado do business com o qual não 
teria tanto contato se as pesquisas não tivessem sido feitas: o ponto de 
vista do vendedor do produto, que passa o dia todo dentro da loja - e 
os insights que time de marketing nenhum conseguiria passar para o 


seu time. 


e Mais confiança dos designers na hora de apresentar as ideias para o 
cliente, já que elas já haviam sido pré-testadas com o consumidor final. 
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e Mais confiança do cliente na agência e especialmente no time de UX 
Design do projeto. 


E quanto isso custa no fim das contas? 


Essa é difícil precisar. Mesmo nesse exemplo que mencionei (das 
pesquisas às terças-feiras de manhã). 

Talvez se eu não estivesse fazendo pesquisa às terças de manhã eu estaria 
usando esse tempo para adiantar outras tarefas do projeto. Mas também cor- 
reria o risco de eu ter gastado esse tempo distraído navegando por aí ou preso 
em alguma reunião improdutiva. 

No fim das contas, o custo foi absorvido no montante do projeto e o 
cliente nem sentiu no bolso o peso de termos feito pesquisa. Também não 
precisamos “comunicar oficialmente” nada para ele; ele só ficou sabendo que 
fizemos pesquisa quando começamos a compartilhar com ele insights colhi- 
dos dos consumidores durante o projeto. Foi aí que ele nos ajudou a garan- 
tir que a loja estivesse sempre preparada para nos receber, toda semana, às 
terças-feiras de manhã. 

É claro que esse exemplo não é uma “fórmula mágica” de como fazer 
pesquisas com usuários, mas de repente é um empurrão para quem esteja 
com vontade de incorporar esse método dentro do processo de Design e não 
saiba por onde começar. 

É muito comum ouvir reclamações de outros times dizendo que os fa- 
tores externos (verba/prazo) não favoreceram a realização de pesquisa com 
usuários, mas é raro ouvir histórias de times que toparam correr o risco e 
promover a mudança. Como tudo nessa vida, para que qualquer mudança 
aconteça é preciso quebrar alguns paradigmas e se aventurar um pouco mais 
(mesmo que muitas vezes você quebre a cara por causa disso). 


8.5 Os NÚMEROS NÃO MENTEM 


Um outro lado das pesquisas com usuários são os métodos quantitativos. 
Nas plataformas digitais, é possível medir uma série de números que dizem 
respeito à forma com a qual as pessoas interagem com o seu produto: tempo 
de navegação, quantidade de cliques, links mais clicados, ordem do fluxo de 
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navegação, taxas de abandono, taxas de conversão etc. Basta planejamento e 
uma ferramenta que permita medir cada ação que o usuário toma enquanto 
interage com o seu produto (o Google Analytics é um ótimo exemplo de fer- 
ramenta com essa finalidade). 

Acontece que, apesar de muitas vezes a ferramenta quantitativa de 
medição de dados estar instalada e funcionando corretamente, o time de de- 
signers e desenvolvedores acabam esquecendo de olhar para esses números 
para aprender sobre o comportamento das pessoas. 

Em muitos projetos, essa análise das métricas de um site pode gerar in- 
sights valiosos para os designers, ajudá-los a identificar problemas e ainda 
informar exatamente qual o tipo de conteúdo que os usuários mais procuram 
no site. Um exercício simples é o de olhar para as palavras mais digitadas em 
um campo de busca que esteja disponível em seu site: essa lista de palavras 
pode ajudar a informar todo o time sobre quais os conteúdos que os usuários 
mais procuram e o produto pode ser redesenhado para priorizar esses temas 
mais procurados. 

Existem vários métodos de pesquisas quantitativas. A seguir, você vai 
aprender um pouco mais sobre os Testes A/B, um dos métodos que mais têm 
sido usados nas empresas - de startups a grandes corporações. 


8.6 TESTES A/B 


Teste A/B é um método no qual se testam duas versões de uma mesma tela 
(versão A e versão B), ou em alguns casos diferentes versões de um pequeno 
elemento da tela (um botão, um link, um menu etc.). Em muitos projetos, o 
teste A/B é usado para identificar mudanças na página que podem provocar 
resultados positivos ou negativos no interesse dos usuários. 

Normalmente, o teste A/B funciona da seguinte forma: metade dos vis- 
itantes de um site vê a versão A, e metade vê a versão B. Depois de alguns 
dias que o teste está no ar, é possível averiguar os resultados de cada uma das 
versões e perceber qual delas funciona melhor. 

No caso de uma landing page, por exemplo: em qual versão os usuários 
clicaram no botão principal para buscar saber mais sobre o que você estava 
oferecendo? Em qual versão os usuários decidiram se cadastrar no site e 
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em qual versão eles abandonaram a página? Qual foi o tempo de navegação 
do usuário em cada uma das duas versões? Em qual delas os usuários con- 
seguiram prosseguir sem dificuldades pelo fluxo? 

Uma das grandes vantagens dos testes A/B em relação a outros tipos de 
teste é a precisão, já que eles oferecem um feedback real de mercado. Em 
alguns tipos de pesquisa qualitativos, é comum que os usuários digam uma 
coisa, mas na prática façam outra. Nos testes quantitativos, a história já é 
muito mais realista, visto que você está medindo a interação real das pessoas 
com o produto. 
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Os pecados de usabilidade 


Problemas de usabilidade são mais comuns do que parecem. Quantas vezes 
você já não teve problemas com painéis de elevador, com os botões de um 
controle remoto ou com as funções confusas de um caixa eletrônico na hora 
de sacar dinheiro ou fazer uma transação bancária? 


Casa do Código 








Figura 9.1: Qual botão eu devo apertar para subir e qual botão devo apertar 
para descer? 


Da mesma forma que a regra número um do comércio é que “o freguês 
sempre tem razão”, também funciona assim com usabilidade: os usuários 
sempre estão certos. Por isso mesmo esse tipo de problema é chamado de 
“problema de usabilidade” e é necessariamente atribuído à interface, e não à 
pessoa que a utiliza. Se um usuário não consegue realizar uma tarefa dentro 
do seu site, aplicativo ou qualquer tipo de interface que seja, o problema não 
é do usuário; o problema é do design. 

Outro problema comum em vários formulários disponíveis por aí: o fato 
de o botão “Enviar” e o botão “Limpar” estarem muito próximos um do outro 


e serem muito parecidos visualmente. O usuário pode acabar clicando aci- 
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dentalmente no botão “Limpar” e perder tudo o que digitou no formulário. 
Aliás, será que o botão “Limpar” é realmente necessário nesse caso? 


E-mail: 
Cidade: 
Estado: 

Empresa: 
Site: 


Como nos achou? 


(Google, Yahoo, Cadê, etc.): 


DDD e Telefone 


(somente telefone fixo): 


Mensagem: 





Enviar Formulário 








O fato é que ainda hoje muitos sites e aplicativos fracassam miseravel- 
mente por causa de problemas como esse. Quando o usuário não consegue 
realizar a tarefa desejada em determinado site, é muito comum que ele aban- 
done e parta para outra. Afinal, como é muito comum afirmar no universo 
de UX, o concorrente está a poucos cliques de distância. E é verdade. Você 
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mesmo já deve ter passado por isso: se irritou tanto com um site que decidiu 
fazer suas compras em outro lugar. 

Ao mesmo tempo, produtos fáceis de usar têm chamado cada vez mais 
atenção das pessoas e garantido usuários fiéis com o passar dos anos. Se a 
pessoa se sente confortável ao utilizar um produto, é natural que ela o uti- 
lize com frequência e acabe recomendando para amigos que também têm as 
mesmas necessidades que ela. 

Problemas de usabilidade podem se materializar de várias formas e po- 
dem ter origem em vários aspectos da execução de um produto. Um site que 
demora para carregar, um botão que não deixa claro qual a ação que será 
tomada ao clicá-lo, um link que não tem aparência de link, uma mensagem 
de erro que não explica como corrigir o problema, um menu complicado de 
navegar, uma ferramenta de busca que não apresenta resultados relevantes 
etc. 

Outros problemas podem ser menos visíveis e serem caracterizados pela 
ausência de algo. Uma listagem de aparelhos celulares em um e-commerce 
sem a opção de filtrar os produtos por cor, capacidade ou sistema operacional. 
Uma listagem de resultados de busca sem nenhum tipo de paginação para 
permitir que o usuário veja poucos itens por vez. Um site sem ferramenta de 
busca, que força os usuários a utilizarem o menu para encontrar o que estão 
procurando. 


9.1 Como PREVENIR ERROS DE USABILIDADE 


Mas se usabilidade é tão importante para um produto suceder ou fracassar, 
como garantir que o seu produto não peque nesse quesito? 


Através de um bom design (e um bom designer) 


Muitos problemas de usabilidade podem ser evitados antes mesmo de o 
produto começar a ser desenhado. O próprio fato de possuir um UX designer 
no time, que já tenha experiência em desenhar interfaces há muitos anos, 
pode evitar que problemas comuns aconteçam. Um profissional como esse já 
teve experiências anteriores em desenhar interfaces e testá-las com usuários, o 
que normalmente significa que ele já sabe quais são as soluções de navegação 
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e interação que funcionam melhor em cada caso. 


Através de testes com usuários 


Mas ninguém é o dono da verdade. Mesmo profissionais com vários anos 
de experiência acabam cometendo deslizes de usabilidade, o que é ainda mais 
comum quando se está desenhando um produto novo, sem precedentes no 
mercado. 

É por isso mesmo que existem métodos de verificação da usabilidade dos 
produtos. Testes de usabilidade, análise de métricas, entrevistas em profundi- 
dade com usuários reais — todos esses métodos ajudam a averiguar a solução 
criada e garantir que ela esteja realmente ajudando os usuários a realizarem a 
tarefa desejada. 

Mesmo informalmente é possível verificar se a solução criada funciona: 
basta o designer mostrar a solução para outras pessoas dentro do próprio time 
e, com certeza, essas pessoas terão comentários construtivos sobre como mel- 
horar a usabilidade daquela interface. Profissionais que trabalham com de- 
sign e desenvolvimento de produtos digitais costumam ter olho afiado na hora 
de identificar potenciais problemas de usabilidade, então nada mais justo do 
que consultá-los à medida que a interface está sendo criada. 


Através de boas práticas de usabilidade 


Existem muitos livros, blogs e links que falam justamente sobre as boas 
e más práticas de usabilidade. Também existem sites especializados em cat- 
alogar soluções de design por tipo (menus, buscas, botões, listagens, pagi- 
nações etc.). Um bom time de design está sempre se atualizando em relação 
aos padrões de interação que funcionam melhor em cada caso, e sabe onde 
buscar boas referências na hora de desenhar um novo produto. 

Também existem algumas regras universais de usabilidade (algumas das 
quais mencionadas nos capítulos anteriores deste livro), que valem a pena 


conhecer e ter sempre em mente, independente do contexto de uso. 
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9.2 OPÇÕES DEMAIS, OPÇÕES DE MENOS 
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Nem tudo estará visível na interface o tempo todo. Ainda bem. Ocultar itens 


da interface do produto pode ser bastante saudável para deixá-lo mais sim- 
ples, fácil de digerir e agradável de usar. Especialmente em interfaces para 
dispositivos móveis, onde a limitação de tamanho de tela deixa ainda mais 
difícil a tarefa de layoutar todos os comandos que você gostaria de colocar no 
seu produto. 

Os botões (ou gatilhos) que iniciam as interações podem ser visíveis ou 
invisíveis. Pode ou não haver um texto, botão ou outra dica visual que mostra 
aos usuários que alguma determinada ação é possível ali. 

Independente do tipo de produto que você está criando, nem todos os 
itens estarão imediatamente encontráveis assim que o usuário abre o produto. 
Na verdade, ter itens ocultos contribui para dar mais importância aos itens 
que estão visíveis na tela, criando hierarquia para as ações que são mais im- 
portantes naquele momento. 

As ações não precisam estar todas visíveis ao mesmo tempo, mas elas pre- 
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cisam ser “descobríveis” de alguma forma. Seja por acidente, por um tutorial, 
por boca a boca entre as pessoas que utilizam o produto, por um link de ajuda 
contextual etc. 


9.3 OS GATILHOS INVISÍVEIS 


Esse tipo de ação oculta é chamada pelos profissionais de UX de “gatilhos in- 
visíveis” (invisible triggers), e são mais comuns do que você imagina. Em dis- 
positivos com sensores (celulares com touchscreen, microfone, acelerômetro 
etc.) os gatilhos invisíveis costumam ser ainda mais frequentes - especial- 
mente porque nem sempre as ações são ativadas explicitamente através de 
um botão. 








Mark Murphy 
A = phy i Rm 
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ad 7 P ‘ y into French Clouds: App 


Figura 9.2: No Twitter e em outros aplicativos, vocé ‘puxa’ a interface para 
baixo para atualizar a lista. 


Alguns exemplos de gatilhos invisiveis: 


e Os comandos de voz da Siri, no iPhone; 
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e O “release to refresh” do twitter; 


e Balançar a cabeça positivamente usando o Google Glass; 


Sacodir o celular para desfazer o que você digitou no Whatsapp; 


Os atalhos no canto da tela do Mac OS; 


e Torneiras de banheiro que são ativadas com a aproximação da mão. 


Apesar de os gatilhos serem invisíveis nesses casos listados anteriormente, 
as regras do sistema precisam ser claramente comunicadas para os usuários, 
seja antes, durante ou depois que a ação acontece. A ausência de feedback 
pode causar confusão para os usuários, ainda mais quando não estão claras 
as regras que iniciam determinada ação (por que será que o Whatsapp deletou 
o que eu tinha escrito?). 


— à James Douglas Hawes That's clearly a 
Like - Reply - sô 24 - Yesterday at 9:27a 


C) 4 Replies - 8 hours ago 


Baruch Weissman The definition given 
verb... 


Like - Reply - «à 8 - Yesterday at 9:59arr 


Q) View more comments 


Facebook: as regras de como a interação funciona são explicadas antes de 
ela acontecer (“Veja mais comentários”). 
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Personal List 


Pull to Create Item 


Mow the lawn 


Buy groceries 





Clear app: as regras são explicadas enquanto a interação está acontecendo 
(“Puxe para baixo para criar um novo item” 





Whatsapp: as regras são explicadas depois que o usuário chacoalha o tele- 
fone. Nesse caso, é preciso dar ao usuário a opção de facilmente reverter a 
ação. 
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Negligenciando a performance 
das páginas 


A performance das páginas tem um impacto severo na experiência do 
usuário. Segundos a mais no carregamento de um site podem significar frus- 
tração para os usuários e, consequentemente, menores taxas de conversão 


para empresas. 


10.1. O impacto da performance das páginas Casa do Código 





OMA 





As pessoas estão cada vez menos pacientes com páginas que 
demoram para carregar. Um estudo recente feito pela Universi- 
dade de Massachusetts (http://connecticut.cbslocal.com/2013/01/10/ 
study-streaming-video-viewers-lose- patience-after-2-seconds/) mostra 
que usuários perdem a paciência com vídeos após os 2 segundos de espera. 
O mesmo se aplica a páginas web. Ainda mais se levarmos em conta o fato de 
que mais e mais pessoas estão acessando a web através de seus dispositivos 
móveis: muitas vezes a baixa qualidade de conexão faz com que a experiência 
do usuário seja frustrante ou até catastrófica. 


10.1 O IMPACTO DA PERFORMANCE DAS PÁGINAS 


Você já deve ter passado por isso. Entrar em um site e se deparar com uma 
página que carrega de forma extremamente lenta, imagens pesadas, elemen- 
tos não otimizados para web e layout não otimizado para o dispositivo em 
que está sendo visualizado. Isso sem contar os sites que colocam um “Load- 
ing” logo na entrada, achando que isso basta para que os usuários fiquem ali 
parados vinte segundos (para ser otimista) esperando a página carregar. 

Com o crescimento de empresas concorrentes que oferecem serviços sim- 
ilares (todas acessíveis a poucos cliques de distância), é muito comum que as 
pessoas desistam e partam para um outro site que conhecem e sabem que 
funciona melhor. Mesmo que de forma não consciente, tempo é um fator 
decisivo na percepção das pessoas sobre determinado serviço. 
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Figura 10.1: Quantas vezes você já preferiu pagar mais caro e renovar sua 


carteira de motorista em um despachante, em vez de encarar as filas inter- 
mináveis do (muitas aspas) Poupatempo? O princípio é o mesmo. 


No caso dos dispositivos móveis, ainda é preciso levar em conta com mais 
atenção o contexto em que o site é acessado. Cinco segundos na frente do seu 
computador não são o fim do mundo. Mas cinco segundos segurando o celu- 
lar na fila do banco quando sua vez está pra chegar podem ser incrivelmente 
frustrantes. 


10.2 UMA BATALHA DE MUITAS FRENTES 


Obviamente, essa é uma batalha que não se luta sozinho. 


Primeiro, você precisa ter certeza de que todos os membros do time (de- 
signers e programadores) estão cientes de que essa relação entre performance 
e experiência do usuário existe, para que eles já criem o produto com isso 
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em mente. Em outros casos, você precisa convencer o gerente de projetos a 
reservar alguns dias do já apertado cronograma para que o time consiga focar 
em resolver esses problemas de performance e otimizar o peso e desempenho 
do site. E em outros casos, você precisa convencer o cliente a investir alguns 
cruzeiros a mais para que essa otimização aconteça. 

Como a “experiência do usuário” é algo bastante subjetivo, alguém pode 
argumentar que a performance nem tem tanto impacto assim. Já ouvi clientes 
falarem que “se o conteúdo é bom, as pessoas esperam carregar sem proble- 


» 


mas. 


E. 


Uma forma de contornar esse tipo de argumentação é mostrar evidên- 
cias numéricas e mais tangíveis de como essa rejeição dos usuários por sites 
pesados impacta diretamente nas vendas. Quando pesa no bolso, o cliente 
costuma pensar melhor sobre o assunto. 

Veja a seguir alguns estudos de caso recentes sobre boas e más práticas em 
relação à performance e como elas afetaram diretamente o engajamento dos 


usuários com o site ou o retorno sobre investimento (ROI) para as empresas: 


e Usuários esperam páginas carregarem em dois segundos. De- 
pois do terceiro, até 40% dos usuários abandonam o site. 
(http://www.mcrinc.com/Documents/Newsletters/201110_why_ 
web_performance_matters.pdf) 


* A Amazon notou que 100 milissegundos de espera representam um 
declínio de 1% nas vendas (http://sites.google.com/site/glinden/Home/ 
StanfordDataMining.2006-11-28.ppt?attredirects=o) . 


* O Google perdeu 20% de lucratividade e tráfego de usuários por 
causa de um aumento de meio segundo no tempo de carregamento 
de suas páginas de resultados (http://glinden.blogspot.com/2006/11/ 
marissa-mayer-at-web-20.html) . 


e A Akamai mostra em uma pesquisa recente como 75% dos com- 
pradores online que experienciam algum tipo de congelamento, 
link quebrado ou pagina que demora muito para carregar deixam 
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de comprar daquele site (http://www.akamai.com/dl/reports/Site 
Abandonment Final Report.pdf). 


e O Google Maps realizou um estudo que apontou que reduzir o peso da 
página de 100KB para 80KB fez com que o tráfego aumentasse 10% na 


primeira semana e 25% nas três semanas seguintes. 


e O time de design do Etsy percebeu um aumento na taxa de rejeição 
em 12% em dispositivos móveis quando resolveram adicionar mais im- 
agens na página, num total de 160KB. 


e A DoubleClick removeu um redirect de uma página (aquela 
troca de URL que vocé as vezes nem percebe que aconteceu) 
e viu um aumento de 12% no acesso da pagina em disposi- 
tivos móveis (http://doubleclickadvertisers.blogspot.com/2011/06/ 
cranking-up-speed-of- dfa-leads-to.html) . 


* A Amazon verificou em testes que comprimir imagens em JPEG em 
uma página reduz a quantidade de bateria necessária para carregá-la 
em um dispositivo móvel em até 20%. No Facebook, que tem mais 
imagens, essa economia de bateria chega a 30% (http://www2012.0rg/ 
proceedings/proceedings/p41.pdf) . 


10.3 OTIMIZANDO A PERFORMANCE 


Não existe uma única resposta para quem quer saber como otimizar 
a performance de um produto. Existem várias delas, cada uma com 
um ponto de vista diferente. Existem nichos de desenvolvimento front- 
end que são focados somente nesse assunto - e seria pretensão de- 
mais tentar explicar tudo isso por aqui. Mas a seguir você encon- 
tra alguns pontos citados pelo A List Apart (http://alistapart.com/article/ 
improving-ux-through-front-end-performance) sobre boas práticas para 
otimizar a performance de um site. Não é um checklist exaustivo, mas é um 
bom começo. E mesmo que você não seja um desenvolvedor, é válido ter em 
mente esses pontos ou repassá-los para seu time. 
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e Limpe seu HTML. Renomeie elementos não-semânticos no seu 


HTML. Agrupe elementos pela funcionalidade que oferecem, não pelo 
conteúdo. Menos IDs no CSS, menos tempo de carregamento. Evite 
também os excessos de DIVs — isso também facilita a edição do código 
no futuro. 


Limpe seu CSS. Remova seletores que não estão sendo usados. Em mé- 
dia, essas linhas extras de código aumentam o tempo de carregamento 
da página (não o peso, repare) em 5,5%. 


Reúse código sempre que possível. Elementos-mestre, includes, 
padrões de interação aplicados também ao código. Menos HTML e 
CSS deixa a manutenção mais fácil e reduz levemente o tempo de car- 
regamento. 


Faça menos requisições. Cada vez que seu site faz uma requisição 
para um serviço (ex.: “mostrar lista de amigos que curtiram este pro- 
duto”), o tempo de carregamento aumenta consideravelmente. Aliás, 
em muitos casos, as requisições demoram mais tempo do que todas as 
imagens existentes na página demoram para serem carregadas. Evite 
também a requisição da requisição da requisição, que gera aqueles redi- 
rects bizarros que mencionamos aqui antes. Não requisite arquivos em 
todas as páginas se ele não está sendo realmente exibido em todas elas. 
Quando possível, substitua scripts de redes sociais por links. 


Otimize as imagens. Passe-as por otimizadores como o ImageOptim. 
Mesmo quando a imagem está em alta resolução para dispositivos com 
tela-retina, comprima. 


Economize nas requisições de imagens. Crie sprites. Por exemplo: 
para backgrounds que se repetem, crie uma para repetição horizontal, 
outra para repetição vertical. 


Use menos imagens. Verifique quais imagens você consegue substi- 
tuir com efeitos de CSS3. Além de reduzir drasticamente o peso, isso 
permite que você edite essas imagens no futuro apenas via CSS (para 
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não ter que abrir e editar o asset original). Existem tecnologias que per- 
mitem embedar uma imagem no CSS em vez de sempre apontar para 
uma URL que irá carregá-la. 


Como UX e visual designers podem contribuir para a otimização 
da página? 

Além desses pontos mais técnicos (consulte sempre um profissional front- 
end) existe um último que impacta diretamente na forma em que UX e visual 
designers podem contribuir para a otimização da performance de uma página 
- criar um design que seja otimizado para boa performance, desde o primeiro 
dia do projeto. 

Quantos tamanhos de fonte você está usando? Precisa mesmo de todos 
eles? Lembre-se que cada tamanho de fonte vira uma classe no CSS, e isso au- 
menta o tempo de carregamento. Quantas imagens você está usando? Você 
está usando imagens full screen somente quando é realmente necessário? O 
seu layout “combina” com o tipo de site que você está desenhando? Se você 
está trabalhando em um e-commerce, onde a performance da página tem 
impacto direto na conversão e vendas, tem certeza de que aquela imagem 
1600x1200 que você adicionou é realmente necessária? Você está reutilizando 
elementos da melhor forma possível, ao invés de criar elementos novos na 
página a cada vez? Todos os blocos de conteúdo que você colocou na página 
são realmente necessários? Quais deles você poderia sacrificar em benefício 
de um menor tempo de carregamento? Quais elementos você pode carregar 
somente depois que o usuário começa a descer a rolagem? 

A lista é extensa, o assunto é complexo e as técnicas de otimização mudam 
a cada dia. 





GOSTA DESSE ASSUNTO? 


Se você tem interesse em conhecer mais sobre as questões de perfor- 
mance em design, acesse http://fabricio.nu/performance. 
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Produtos que ninguém usa 


Profissionais que trabalham em áreas diretamente relacionadas a Design e 
Tecnologia costumam ser fascinados por inovações tecnológicas. Diaria- 
mente lemos blogs, portais e outros sites com notícias de tecnologia e fi- 
camos realmente empolgados quando alguma grande empresa lança uma 
nova traquitana tecnológica. 

Mas as pessoas que utilizarão os produtos que criamos, nem sempre. Al- 
iás, quase nunca. Experimente perguntar para o seu cabeleireiro ou para o 
caixa do supermercado se ele sabe o que é HTML, o que é o Snapchat ou o 
que significa Realidade Aumentada. Tecnologias essas que fazem parte do 
nosso vocabulário e de mais ninguém. Pelo menos não do vocabulário das 
“pessoas normais”, para as quais você desenha muitos produtos no decorrer 
da sua carreira como designer. 
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11.1 COMEÇANDO PELO USUÁRIO 


“e 









T 





E 


Um exemplo clássico da fascinação pela tecnologia é o caso dos QR Codes: 
uma versão bidimensional dos códigos de barras que virou febre nos últimos 
anos entre algumas empresas. A ideia é interessante: basta o usuário escanear 
o QR Code usando a câmera do seu smartphone e ele consegue acessar alguma 
URL “escondida” ali naquele código. 

Mas o problema é que os QR Codes nunca foram febre entre os usuários 
- pesquisas mostram que a massiva maioria das pessoas nunca ouviu falar no 
termo e sequer possuem um aplicativo que consegue ler QR Codes instalado 
em seus celulares. 

O assunto virou até piada na internet em blogs como o http://wtfqrcodes. 
com/ e o http://picturesofpeoplescanninggrcodes.tumblr.com/. 

Casos como esse, de tecnologias que só fazem sentido para os usuários 
avançados, mas que não são utilizadas pelos usuários médios, são mais co- 
muns do que parecem. E a origem do problema é uma só: muitas vezes os 
times começam a criar o produto pensando na tecnologia que será uti- 
lizada, em vez de pensarem no problema que ele está tentando solucionar 
na vida dos usuários. 

“Nós vamos criar o primeiro aplicativo de realidade aumentada integrado 
com Bluetooth no ponto de venda”, 

“Nós vamos criar uma solução de interconectividade entre browser e 


banco de dados que utiliza protocolos de conexão abertos”. 
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“Nós vamos criar um sistema que conecta a API do serviço X com o 
serviço Y e manda tudo por SMS”. 

Convenhamos. Usuários intermediários e iniciantes não pensam assim e 
nunca pensarão. O que os usuários querem é “uma solução para pagar minha 
conta de luz no celular”. Ou “uma solução para gastar menos tempo na fila do 
banco”. 

Steve Jobs tem uma frase muito conhecida sobre o assunto que funciona 
bem até hoje: 


“Comece com a experiência do usuário e depois defina a tecnologia usada? 


11.2 ESCOLHENDO UMA TECNOLOGIA 


Idealmente, um produto se inicia a partir de uma necessidade real dos 
usuários. Existem várias formas de se chegar até uma necessidade: através 
de pesquisas com consumidores, através de relatórios de tendências produzi- 
dos por consultorias parceiras, ou mesmo através de um insight que você teve 
enquanto estava tentando resolver um problema no seu dia a dia. 

Depois de definido o problema que o produto está tentando resolver e 
de passada uma etapa inicial de conceituação e brainstorms, existe um mo- 
mento em que o time precisa se reunir para definir qual será a tecnologia (ou 
a combinação de diferentes tecnologias) que permitirá que o usuário consiga 
resolver o problema. 

É só nessa hora que termos como “SMS”, “Bluetooth” ou “HTML” deve- 
riam começar a surgir na mesa. Desenvolvedores e profissionais com back- 
ground mais técnico podem assumir um papel importante nessa hora: por 
conhecerem de cabo a rabo as tecnologias disponíveis no mercado, é mais 
fácil para eles definir quais delas podem ser utilizadas na solução. 

Nesse momento, o papel do UX designer é garantir que as tecnologias 
façam sentido para as pessoas e para o contexto onde o produto será uti- 
lizado. Afinal, você não vai querer criar um aplicativo de smartphone para 
consumidores de classe D e E, que raramente têm acesso a esses dispositivos; 
ou mesmo criar um site mobile para ser acessado dentro de um shopping 
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center, onde muitas vezes o sinal de internet as operadoras de celular é fraco 
e insuficiente para garantir uma boa experiência do usuário. 

Outro cenário comum é o de o time receber um briefing do cliente que 
já possua a solução técnica definida. “Precisamos criar um site responsivo 
para nossa marca” ou “precisamos criar um aplicativo de celular para nossos 
prospects”. Mas será que aquela é realmente a melhor solução técnica para 
o problema da marca e do usuário? Será que as pessoas estão dispostas a 
baixar um aplicativo da marca só para conseguirem consultar o preço dos 
produtos, por exemplo? O ideal, nesses casos, é que o time se reúna para 
discutir se aquela solução é realmente a melhor opção para aquele produto. 
Alguns critérios que podem ser levados em conta na hora de decidir entre 
uma ou outra tecnologia são: 


e Conteúdo e funcionalidades do produto. O que o produto precisa 
fazer? Ou melhor: o que as pessoas precisam conseguir fazer usando 
aquele produto? Quais as funcionalidades essenciais para o produto 
existir? Qual a melhor plataforma e tecnologia para criar aquela fun- 
cionalidade? 


* Expectativas dos usuários. O que o usuário espera conseguir fazer 
com o produto, e o que você está adicionando de bônus dentro dele? 
Com que velocidade ou que nível de esforço os usuários estão dispos- 
tos a realizarem a tarefa? Eles estão familiarizados com a tecnologia 
escolhida? Eles têm acesso a ela? 


* Tempo de desenvolvimento. Qual o cronograma de desenvolvimento 
para aquela tecnologia escolhida? Quais as outras opções que podem 
tornar o desenvolvimento mais breve? Como o desenvolvimento pode 
ser faseado para lançar features o quanto antes - e conseguir testá-las 


com usuários? 


* Sistemas legados. Com quais outros sistemas já existentes o produto 
precisa se comunicar? Quais tecnologias são compatíveis com eles? 


* Estratégia de divulgação e outros pontos de entrada. Como e em 
quais canais o produto será divulgado? A tecnologia escolhida permite 


168 


Casa do Código Capítulo 11. Produtos que ninguém usa 





que os usuários que fiquem sabendo do produto consigam utilizá-lo de 
forma rápida e fácil? Em quais outros canais os usuários utilizarão o 
produto? 


As decisões de tecnologia podem ser cruciais para o sucesso ou fracasso 
de um produto, e é nesse momento que o UX designer deve contribuir com 
inputs estratégicos que possam ajudar o time nessa decisão. Conhecer o 
público-alvo e as tecnologias às quais ele tem acesso pode ser um fator de- 
cisivo para informar a decisão técnica. 

Mas vamos deixar esses exemplos um pouco mais tangíveis. Veja a seguir 
algumas decisões comuns que tenho notado nos projetos de que participei 
nos últimos anos: 


e Site responsivo vs. site dedicado para cada tamanho de tela. Uma das 
decisões mais comuns na hora de criar um website é pensar em como 
o design se adaptará a diferentes resoluções de tela. Afinal, usuários 
devem conseguir acessar o site independente do dispositivo que estão 
usando: smartphones, tablets, laptops, desktops, TVs interativas etc. 
Nesse caso, qual a melhor opção para o projeto? Criar um único site 
com layout fluido que se adapta automaticamente a todos esses taman- 
hos de tela? Ou ter um site específico para ser acessado em celular, 
outro site específico para ser acessado em desktop etc.? 


e Aplicativo mobile vs. Site mobile. Se o produto está sendo criado 
para que os usuários acessem prioritariamente de um smartphone, 
qual a melhor solução técnica para isso? Pedir aos usuários que in- 
stalem um aplicativo da marca, ou permitir que eles acessem um site 
do próprio navegador do celular? Existem vantagens e desvantagens 
em cada um dos casos. Sites estão sempre atualizados, são compatíveis 
com vários sistemas operacionais, são mais facilmente encontráveis pe- 
los buscadores e ideais para usuários que estão tendo contato com a 
marca pela primeira vez. Por outro lado, aplicativos podem ter mel- 
hor performance, podem ser usados offline em alguns casos, permitem 
mais liberdade criativa na interface e ajudam a criar fidelidade com os 
usuários. 
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e Conteúdo estático vs. Conteúdo dinâmico. O conteúdo das páginas 
de um site será atualizado com frequência? A frequência é alta o su- 
ficiente para justificar que exista um sistema gerenciador de conteúdo 
para facilitar a administração e publicação desse conteúdo? Ou as pági- 
nas serão atualizadas com baixa frequência? 


Esses são só alguns exemplos, mas a lista de decisões técnicas é bastante 
extensa. As tecnologias de comunicação podem variar de Bluetooth a SMS, 
passando por radiofrequência e tethering. As linguagens de programação 
também são inúmeras: HTML, JavaScript, C++, Objective C, PHP, Ruby etc. 
Os sensores também variam: GPS, acelerômetro, giroscópio, câmera, sen- 
sores de presença, impressões digitais, luminosidade. 

Para o UX designer, mais importante do que conhecer como as tecnolo- 
gias funcionam (ou mesmo dominar cada uma delas) é entender como as 
pessoas interagem com ela e como elas impactam na experiência do usuário 
- tanto positivamente quanto negativamente. Afinal, isso pode ser um fator 
decisivo quando uma pessoa está considerando utilizar o seu produto ou o de 
um concorrente. 


11.3 DEFININDO A PROPOSIÇÃO DE VALOR DO PRO- 
DUTO 


A Proposição de valor (ou Value Proposition) é o processo de definição de um 
produto e o resultado encontrado ao final desse processo. 

Independente de você trabalhar em agências de publicidade, estudos, 
consultorias ou startups, são cada vez mais comuns os briefings que tratam 
de ajudar determinada marca a criar um produto digital, e não apenas de en- 
contrar formas criativas de comunicá-lo para o público-alvo. 

Acontece que o processo de criação de produtos digitais acaba sendo um 
pouco caótico. Dentro de uma empresa, são diversos os departamentos, áreas 
e negócios que têm opiniões diferentes sobre o que o produto deve ser, para 
quem ele deve ser desenhado e, principalmente, quais funcionalidades ele 
deve conter. Mas o exercício de definir a Proposição de valor do produto 
pode ajudar bastante nessa etapa. 

Alguns pontos que a Proposição de valor ajuda a definir são: 
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e Por que estamos investindo recursos nesse produto? Qual a oportu- 
nidade de negócios que a empresa vê em criar esse produto? Quais da- 
dos e estatísticas ajudam a comprovar que o produto é financeiramente 
viável? 


e Oqueéo produto? Quais funcionalidades ele contém? Qual a principal 
função? Como ele se diferencia dos competidores? 


e Para quem ele está sendo criado? Qual o perfil demográfico do usuário? 
E mais importante: qual o comportamento ou necessidade que são es- 
pecíficos desse usuário e que conectam diferentes perfis demográficos 
em um grupo consistente e uniforme? 


e Onde e quando o produto será usado? Que horas do dia? Com que 
frequência? Em casa, em trânsito, no trabalho? É um produto de uso 
constante ou algo para usar uma vez só? 


e Como queremos que as pessoas usem o produto? Qual é o objetivo de 
UX? O que queremos que as pessoas sintam ao utilizar esse produto? 
Qual sensação queremos causar e qual problema queremos resolver? 


E a pergunta final: de tudo isso que você listou enquanto tentava respon- 
der a essas perguntas, o que é mais importante? 

Responder às perguntas listadas anteriormente é relativamente fácil. 
Basta uma sessão de brainstorm com os membros do time para que vocês per- 
corram cada uma delas e comecem a listar as características do produto. Se 
você quer criar um aplicativo de celular para as pessoas combinarem caronas 
com os amigos, em pouco menos de uma hora é possível gerar uma lista de 
mais de cinquenta ideias de funcionalidade diferentes para o produto. 

Mas definir a proposição de valor é também um processo de afunila- 
mento. Depois de discutir com todos do time sobre o que o produto não 
é e chegar a uma conclusão sobre o que o produto é, o time precisa se policiar 
e voltar a olhar para a proposição de valor a cada nova decisão de design, tec- 
nologia ou marketing que precisa ser tomada. Ter um objetivo bem definido 
para o produto ajuda a evitar que o produto se transforme em outra coisa no 
decorrer do caminho. 
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É essencial saber decidir o que não será desenhado. O que você não de- 
senha também é design. 


Value Propositon 


“For , the offers 
[Some identified Market Segment] Product offering 


because 


(Highly Weighted Benefit or Combo of Benefits communicated 
through the 5 P's] 


Capabilities intemal to the firm that deliver the value 
communicated 





Existem vários modelos disponíveis online para a definição da Proposição 
de valor de um produto. Alguns deles são mais prescritivos e tentam orientar 
o time a preencher lacunas na hora de definir o que um produto faz; outros 
são mais abertos e dão mais liberdade ao time. 

O principal risco em não definir esses pontos claramente é acabar com 
um “produto Frankenstein” A impressão que as empresas têm é que quanto 
mais funcionalidades, mais o produto será útil para as pessoas. Que quanto 
mais abrangente for o público-alvo, mais gente irá utilizá-lo. Que quanto mais 
cenários de uso forem mapeados, mais ele estará presente na vida das pessoas. 

O que não é necessariamente verdade. 

O que não faltam por aí são produtos com toneladas de funcionalidades, 
mas que não são usados por ninguém. Aliás, arrisco dizer que esse é um 
dos principais problemas das milhares de startups que criam produtos com 
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cada vez mais frequência no Brasil e fora dele. Essa ilusão de que um pro- 
duto precisa ser grande para poder ser valioso parece um pouco inocente 
demais —como quando tentamos cozinhar algo e acabamos colocando tanto 
tempero, tanto recheio, tanta cobertura, que a equação de sabor acaba pas- 
sando do ponto e ficando enjoativa. 

Gerar uma lista de ideias de funcionalidades para um produto é um pro- 
cesso relativamente fácil (apesar de ter grande valor para o projeto). Mas de- 
cidir quais delas entram e quais delas não entram é um processo que pode 
tomar semanas, culhões, e uma pitada de pesquisa com usuários. É um pro- 
cesso exaustivo, no qual todos do time precisam estar envolvidos e precisam 
discutir por longas horas. 

Do ponto de vista específico do UX designer, saber identificar um brief- 
ing que está inflacionado demais e saber dizer não para algumas coisas é um 
dos principais desafios da profissio—mas também um dos exercícios mais 
divertidos. 
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Priorizando funcionalidades 


Quando você está envolvido diretamente na criação e desenvolvimento de um 
produto digital, é normal querer adicionar funcionalidades a ele para garantir 
que ele seja o “mais completo possível”. 

Mas é nessa hora que muitos equívocos conceituais acontecem. 

É comum que desenvolvedores pensem em produtos digitais como um 
conjunto de features que coexistem e funcionam juntas para entregar valor 
ao usuário final. Acontece que nem sempre ter mais funcionalidades significa 
ter um produto melhor. 


12.1 O ETERNO PROBLEMA DO ESCOPO E DO PRAZO 


Designers e desenvolvedores frequentemente se veem em uma situação em 
que existe limitação de prazo ou de budget. O projeto tem uma data de lança- 
mento pré-estipulada, e ainda assim existe muita coisa a ser feita até que o 
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produto esteja pronto para ser lançado. Nesses casos, olhar para os detalhes 
da experiência do usuário que farão o produto ter uma boa usabilidade e ser 
bem visto pelas pessoas que o utilizam normalmente são despriorizados na 
lista de afazeres do projeto. 

Você já deve ter passado por isso. O projeto está a algumas semanas de 
terminar e o site possui dezenas de páginas e templates, mas quando você 
vai analisar o resultado final de perto, o que você vê são páginas mal organi- 
zadas, funcionalidades que não foram testadas exaustivamente e problemas 
de usabilidade em todos os momentos do fluxo. 

Mas ter um produto gigante não é necessariamente o caminho mais cor- 
reto. Ainda mais se você e seu time querem entregar um produto de alta qual- 
idade para o mercado e uma ótima experiência para os seus usuários. 

Em alguns casos, é preferível sacrificar algumas funcionalidades e lançar 
um produto menor do que “fazer só por fazer” ou “adicionar só por adicionar”. 
Quantidade não é qualidade, ainda mais em um assunto tão complexo e cheio 
de peculiaridades quanto a experiência do usuário. 


“Good design is as little design as possible. Less, but better — it concentrates on 
essential aspects. Products are not burdened with non-essentials. Back to 
purity, back to simplicity.” 

- O 10° princípio do bom Design segundo Dieter Rams 
(http://en.wikipedia.org/wiki/Dieter_Rams) 






Cut Copy Paste 


o 
Here is some text] 
ə 


Figura 12.1: Como assim, lançar um telefone sem Copy and Paste? 
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Veja o exemplo do iPhone ilustrado aqui. Quando foi lançado, o iPhone 
não tinha a funcionalidade de Copy and Paste, a qual muitos designers e de- 
senvolvedores considerariam essenciais para o lançamento do produto. Na 
verdade, o iPhone não tinha nem metade das funções que tem hoje. E mesmo 
assim, o produto era tão fácil de usar e tinha uma experiência de uso tão única 
e memorável, que foi um grande sucesso. 


12.2 A ESTRATÉGIA DOS CUPCAKES 


"Entregue um cupcake, ao invés de um bolo com recheio e cobertura.” 

Essa frase foi usada pela Adaptive Path em um vídeo que fala sobre o 
planejamento de produtos digitais. 

Veja o video: http eo.com/1« 

Quando se trata de planejar features e criar um cronograma para que elas 
sejam lançadas em um produto, muitas empresas ainda têm uma mentalidade 
que o pessoal da Adaptive Path chama de “mentalidade de bolo”. 


Primeiro, comece com o bolo. Depois crie o recheio. No final, impres- 


sione todo mundo ao adicionar uma deliciosa cobertura. 


OSL 


cake, then filling, then icing 
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Mas o problema desse tipo de mentalidade é que as coisas acontecem em 
sequência cronológica. E o bolo, por si só, sem o recheio e nem a cobertura, 
pode ser muito seco e não muito empolgante para o consumidor. 


O que eles propõe, então, é que você comece com um cupcake. 


-@-& 


CUPCAKE WEDDIN(> CAKE 





Apesar de menor, o cupcake por si só já é bonito e saboroso o suficiente 
para atrair as pessoas para consumi-lo. Depois que o cupcake estiver pronto, 
aí sim você pode pensar em construir um segundo cupcake, um bolo maior 
ou até um bolo super decorado. 

E a vantagem, é claro, é que o cupcake leva muito menos tempo (e recur- 
sos) para ficar pronto do que o bolo. 

Com os produtos digitais o problema é similar. Às vezes, as empresas 
miram tão alto no produto que querem lançar, que o produto acaba nunca 
sendo lançado. Ou pior: é lançado sem o cuidado com os detalhes que farão 
o produto realmente se diferenciar da concorrência e que darão aos usuários 
motivos suficientes para voltarem a utilizá-lo. 
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12.3 PRIORIZANDO AS FEATURES DE UM PRODUTO 


Na hora de decidir quais funcionalidades são realmente essenciais para que o 
produto se sustente, UX designers, product owners e desenvolvedores acabam 
usando diferentes métodos e levando em conta diferentes fatores na equação. 

Mas de forma resumida, as features devem ser priorizadas levando em 
conta as necessidades dos usuários, as necessidades de negócios e as condições 
técnicas para que elas sejam possíveis. A participação de profissionais de UX 
nesse processo de priorização de features ajuda a colocar o usuário no centro 
do processo. Um método comum utilizado por eles é o levantamento de casos 
de uso do produto. Em linhas gerais: 


1) Quais são os casos de uso mais comuns no seu produto? 
2) Quais são os players ou participantes envolvidos nesse caso? 


3) Para que esses participantes consigam realizar a(s) tarefa(s) descrita(s) 
nesse caso de uso, quais são as funcionalidades que eles utilizam? 


4) Dessa lista de funcionalidades, quais delas são estritamente necessárias 
para que a ação ocorra? 


Ao fazer esse exercício, é possível perceber com mais clareza que, apesar 
de o produto ser grandioso e ter uma série de funcionalidades, apenas um 
pequeno grupo delas é responsável por 80% a 90% do uso de um produto — 
enquanto outras mal chegam a representar 1% dos casos. 
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investment 





Uma forma bastante conhecida de priorizar usos de caso e funcionali- 
dades é o chamado Kano Model - criado nos anos 80 por Noriaka Kano, um 
expert em satisfação dos consumidores. 

Essencialmente, é uma matriz formada por dois vértices onde as features 
são posicionadas levando em conta a Satisfação do consumidor e o Esforço 
de execução. 

A partir do momento em que você percorre toda a lista de funcionalidades 
do seu produto e as posiciona nessa matriz, fica mais fácil visualizar quais 
delas devem ser priorizadas, dependendo do objetivo de negócios da empresa. 
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Excitement 
Generators 


Basic 
Expectations 


Extreme frustration 





Normalmente, o primeiro passo é cumprir o mínimo necessário para evi- 
tar frustração dos usuários (canto inferior direito da matriz). Já no canto 
superior esquerdo, ficam os chamados “quick hits": as pequenas implemen- 
tações que não requerem grande esforço técnico e trazem resultados notáveis 
para a experiência do usuário. 

Além do Kano Model, existem muitas outras metodologias para se pri- 
orizar funcionalidades, todas de fácil acesso na web para quem se interessa 
pelo assunto. São variações do mesmo modelo que priorizam outros aspectos 
que não a satisfação do consumidor. Mas já que aqui o assunto é UX design, 
melhor seguir com o Kano Model e colocar o consumidor em primeiro lugar. 
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12.4 UM PRODUTO NUNCA ESTÁ PRONTO 


Você já deve ter passado por isso no seu trabalho. Durante as últimas semanas 
do projeto, o time vira noites e noites para deixar tudo redondinho para o 
lançamento. Depois de alguns conflitos e possíveis atrasos, finalmente o site 
é lançado, o time comemora e depois nunca mais toca no assunto. Projeto 
entregue, site no ar, e tanto faz se as pessoas estão tendo uma boa experiência 
ou não ao interagirem com o produto final. 

Mas a verdade é que nem sempre precisa ser assim. Para determinados 
tipos de produto, é importante planejar o que vai acontecer com ele depois 
que a primeira versão for lançada. É claro que se você está desenvolvendo 
uma landing page para um evento que acontece somente em um dia especi- 
fico, talvez esse não seja o seu caso. Mas muitas vezes o produto tem uma 
grande oportunidade de evoluir e, consequentemente, gerar novos negócios 
para a sua agência/produtora/empresa e uma experiência mais refinada para 
os usuários. 

Lançar um novo site, ou aplicativo, ou interface requer cuidado. Após a 
publicação, é preciso analisar como as pessoas estão realmente interagindo 
com ele para conseguir otimizar a experiência do usuário. Muitas vezes, uma 
funcionalidade que você desenhou e desenvolveu com muito cuidado está 
sendo subutilizada pelos usuários, ou então eles estão tendo dificuldades em 
prosseguir no fluxo por um pequeno detalhe de usabilidade que passou batido 
na hora de entregar o produto final. 

Nesse sentido, o UX designer pode ajudar o gerente de projetos a planejar 
quais serão as etapas de evolução do produto após o lançamento. Existe uma 
série de métodos para se analisar um produto e propor melhorias nele, e um 
dos principais é olhar para as métricas, entender como as pessoas estão in- 
teragindo com cada seção, página e funcionalidade e depois propor pequenos 
refinamentos para ajudar as pessoas e a empresa a atingir o objetivo original. 

Também é importante que, em determinado momento do projeto, o time 
chegue a um consenso em relação às métricas de sucesso, ou Key Perfor- 
mance Indicators (KPIs) do produto. Como vocês conseguirão medir se o 
produto realmente cumpriu as metas preestabelecidas? Qual o plano B (e 
plano C, e D, em alguns casos) caso a meta não seja atingida? Quais mu- 
danças vocês podem fazer no produto para otimizar sua performance? 
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Depois de um tempo que o produto está no ar, o UX designer pode duplar 
com um profissional de Análise de Métricas (ou Business Intelligence) para 
analisar o que está e o que não está funcionando ali. Nesse momento, pe- 
quenos ajustes na interface podem fazer uma grande diferença para os negó- 
cios — o que ajuda a convencer o cliente a investir umas horas a mais depois 
que o produto está lançado. 

Um outro método interessante nesse momento é o teste de usabilidade. 
Agora que o produto está funcionando, o UX designer pode organizar algu- 
mas sessões de testes onde os usuários são convidados a utilizarem o produto 
e darem feedback sobre o que gostam e o que não gostam. Novamente: um 
processo como esse gera insights valiosos para otimizar a performance do 
produto. Em paralelo a isso, após algum tempo de lançamento, é possível ob- 
servar os outros canais de serviço ao consumidor que a empresa possui para 
avaliar como as pessoas estão reagindo ao novo produto. 

Um exemplo: em um projeto que lançamos recentemente aqui na agên- 
cia, redesenhamos completamente o e-commerce da marca em questão. Após 
um mês do lançamento do novo site, fizemos uma série de entrevistas com 
os operadores do call-center da marca para entender se os consumidores es- 
tavam mencionando dificuldades em utilizar o novo site para resolver um 
problema. No final das entrevistas, saímos com uma lista de cinco melhorias 
relativamente simples que precisávamos fazer no site para otimizar a exper- 
iência dos usuários. Após essa nova versão, o call-center viu uma queda de 8% 
no número de telefonemas em relação ao site. Menos custo para a empresa, 
menos problemas para os usuários. 

O mais importante é estar preparado para o lançamento e ter um plano 
de ação. Muitos produtos hoje em dia são lançados em versões drasticamente 
simplificadas da versão original, como foram concebidos inicialmente. Mas 
isso não acontece por falta de prazo ou verba. As empresas (principalmente 
startups) já perceberam que quanto antes um projeto vai para a rua, maiores 
as chances de receber feedback dos consumidores, testar e implementar mel- 
horias. A partir daí, é claro, as novas funcionalidades podem ser progressiva- 
mente “plugadas” no produto à medida que o produto e a empresa evoluem. 
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Checklist de UX 


User Experience não é uma disciplina binária, onde existe o “certo” e o “er- 
rado”. Para alguns usuários, determinado layout pode parecer lindo e simples 
de usar, enquanto para outros pode ser a coisa mais difícil do mundo. Na 
essência, UX Design trata de entender o que os usuários pensam e como se 
comportam quando estão tentando realizar alguma tarefa usando um pro- 
duto. 

Mas, apesar da inexatidão e subjetividade da experiência do usuário, exis- 
tem algumas boas práticas que podem ser úteis para os UX designers e outros 
membros do time. 

Listei a seguir uma espécie de resumo de tudo o que foi falado no livro até 
agora. Menos como “as respostas certas” e mais como um lembrete sobre o 
que você deve ter em mente quando estiver projetando uma experiência para 
as outras pessoas. 

A experiência do usuário precisa ser... 
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SIMPLES 


Reduzir. É possível retirar algum elemento ou informação da tela e 
ainda assim permitir que o usuário consiga cumprir a tarefa sem prob- 


lemas? 


Revelar. Você está revelando as informações progressivamente, à me- 
dida que o usuário avança no fluxo? É possível esconder alguma parte 
da tela e só exibi-la após alguma ação do usuário? 


Padronizar. O visual da tela está consistente? Você está usando o 
mesmo estilo visual para elementos que possuem funções similares? 
Você está reaproveitando padrões de interação em diferentes partes do 
produto? 


Simplificar. As informações estão sendo apresentadas da forma mais 
simples possível, em pequenas doses? É possível reduzir textos ou ocul- 
tar alguns elementos naquele momento específico da experiência? 


Priorizar. É possível esconder ou despriorizar visualmente algumas 
ações, para que a ação primária receba mais importância? Se existem 
gatilhos escondidos na tela, eles são “descobríveis” de alguma forma 
(por acidente, por um tutorial)? 


Adiar. É possível reduzir ou retirar algum campo do formulário? Você 
está realmente usando todas as informações coletadas? E possível co- 
letar algum desses dados em um momento futuro do fluxo do usuário? 


Testar. A usabilidade do sistema já foi testada com usuários reais? Ex- 
iste uma solução para os problemas mais comuns que os usuários en- 
contram ao interagirem com o produto? 


Analisar. O time está usando as métricas existentes (ex.: Google Ana- 
lytics) da melhor forma possível? Quais são pequenos ajustes que po- 
dem ser feitos na interface para otimizar a conversão de usuários? 
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13.2 


13.3 


ACIONAVEL 


Direcionar. Está claro para o usuário a ação principal que ele deve 
tomar naquele momento ou naquela tela? 


Explicar. O rótulo da ação está claro e diz ao usuario o que vai aconte- 
cer após ele clicar ou interagir? É possível deixar ainda mais claro? 


Indicar. Os botões e links têm a aparência apropriada para explicar ao 
usuário que ele pode interagir com eles? 


Incentivar. Os textos da tela estão incentivando o usuário a seguir adi- 
ante? O usuário tem acesso às informações necessárias para continuar 


se movendo pelo fluxo, sem precisar fazer desvios de rota? 


Situar. O usuário consegue se localizar dentro da estrutura do site 
naquele momento? Está claro para ele qual o estado do sistema? Ele 
sabe em que passo está dentro do fluxo e quantos passos faltam para 
ele concluir a tarefa? 


Informar. O usuário tem acesso a todas as informações necessárias 
para seguir adiante? 


Ajudar. Quando uma mensagem de erro é exibida, está claro para o 
usuário o que causou o erro e o que ele deve fazer para corrigi-lo? 


Continuar. O sistema evita criar ruas sem saída para o usuário? Você 
está sugerindo ações para o usuário em cada passo do fluxo? 


INTELIGENTE 


Destacar. Qual a ação mais comum que o usuário busca quando in- 
terage com seu site? E possível destacar essa ação em detrimento de 
outras? É possível criar atalhos para as ações mais comuns em deter- 


minada tela? 


Prevenir. O sistema previne erros antes de eles acontecerem? Olhando 
para as métricas do site: quais os erros mais comuns que os usuários 
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13.4 
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cometem? Como antecipar esses erros e deixar as instruções mais claras 


para que eles não aconteçam? 


Tolerar. O sistema é tolerante com distrações e erros do usuário? É 

7 cC » . . h ? Los 
possível “perdoar” alguns erros no meio do caminho? O usuário con- 
segue desfazer ações com facilidade? 


Personalizar. Você está usando as informações que possui sobre o 
usuário da melhor forma? Com essas informações que você possui, 
como você pode facilitar a vida do usuário ou fazer a experiência ser 
mais personalizada para suas necessidades? 


Automatizar. É possível automatizar algum processo para simplificar o 
nível de esforço requerido do usuário? É possível utilizar algum sensor 
ou outra fonte de informação em vez de pedir que o usuário manual- 


mente a adicione? 


Extrapolar. Você está aproveitando outros sentidos como tato e au- 
dição para transmitir a mensagem para o usuário? 


AGRADÁVEL 


Humanizar. O tom de voz dos textos da interface está alinhado com a 
personalidade da sua marca? Se sua marca fosse uma pessoa, como ela 


conversaria com os usuários? Qual vocabulário ela usaria? 


Alinhar. As imagens utilizadas na interface estão alinhadas com o 
branding da empresa? Facilitar. O tamanho dos elementos da inter- 
face são suficientes para que o usuário interaja com eles em todos os 
dispositivos em que o produto é acessado? Os textos são legíveis o su- 
ficiente? Há contraste e hierarquia nos tamanhos de fonte? 


Mover. As animações e transições de interface estão sendo usadas da 
melhor forma para dar feedback ao usuário sobre suas ações e para ex- 
pressar a personalidade da marca? 
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13.5 


Considerar. O sistema evita criar desvios de rota na experiência? 
Todas as ações que você pede para o usuário são extremamente 
necessárias para o objetivo que ele tem em mente ao usar seu produto? 


Explicar. Está claro para o usuário por que o sistema está solicitando 
determinadas informações? A troca é justa? O usuário vê com clareza 
o benefício em fornecer aqueles dados? 


Agilizar. Você está usando o tempo do usuário com parcimônia? 
Quando uma ação toma muito tempo para ser concluída, o sistema per- 
mite que ele faça outras coisas no meio tempo? 


Surpreender. O sistema proporciona agradáveis surpresas para os 
usuários no decorrer da experiência? 


RELEVANTE 


Entregar. As funcionalidades do produto são realmente as que o 
usuário espera encontrar? Você já testou o seu produto com usuários 
reais? 


Refletir. Por que as pessoas usariam o seu produto em vez de um pro- 
duto concorrente? Por que elas deixariam de fazer aquela atividade do 
jeito que já fazem, para começarem a fazer usando o seu produto? 


Escolher. As tecnologias escolhidas para sustentar o produto são 
compatíveis com as tecnologias às quais os usuários têm acesso? Os 
usuários dominam essas tecnologias? Alguma delas pode estar se tor- 


nando uma barreira para novos usuários? 


Acompanhar. Olhando para as métricas do produto: quais seções ou 
funcionalidades estão sendo pouco acessadas? Isso é necessariamente 
um problema para os objetivos de negócios da empresa? É possível 
eliminar funções irrelevantes para a proposição de valor do produto? 


Consultar. Para perguntar aos usuários: no final da experiência o pro- 
duto está entregando o que se propõe a fazer? 
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e Melhorar. Você está usando informações colhidas dos usuários (qual- 
itativamente ou quantitativamente) para fazer melhorias no produto? 
Quais novas funcionalidades eles esperam ver? Como aperfeiçoar os 
principais fluxos? 
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CAPÍTULO 14 


UX no mundo dos negócios 


Na teoria é tudo muito bonito, mas e na prática? A essa altura você deve estar 
se perguntando sobre o real impacto da experiência do usuário nos negócios. 
Afinal, todos sabemos que uma prática só se consolida como profissão a partir 
do momento em que começa a gerar lucro para as empresas — tornando o 
modelo sustentável para todas as partes envolvidas. 

A boa notícia é que cada vez mais as empresas estão percebendo o impacto 
de UX para os negócios, a ponto de montarem times inteiros de profissionais 
de UX para seus projetos. 

Por ser uma profissão um pouco mais estratégica, é natural que o número 
de profissionais de UX seja menor do que o de diretores de arte, ou desen- 
volvedores, por exemplo. Para dar uma ideia: em uma agência de publicidade 
digital brasileira de 200 funcionários, o número de UX designers costuma 
variar entre 3 e 6. Nos EUA, esse número varia entre 10 e 20. Já em empresas 
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maiores (como Globo.com, Amazon, Google), os departamentos de UX po- 
dem chegar a 200, 300 profissionais, muitas vezes divididos entre diferentes 
subáreas (como Pesquisa, Design de Interação etc.). 

Essa movimentação começou a acontecer nos anos 2000, quando as em- 
presas maiores começarem a perceber o quanto pequenas melhorias de us- 
abilidade podem afetar diretamente os lucros. 


14.1 DESIGN = DINHEIRO 


Um exemplo clássico é o caso do botão de 300 milhões de dólares da Ama- 
zon. Isso mesmo. Um simples ajuste em um botão fez com que as vendas 
da loja virtual aumentassem em 45%, gerando um faturamento adicional de 
US$ 300 milhões no primeiro ano depois de implementado. Quem conta a 
história é Jared Spool, da User Interface Engineering — UIE (http://www.uie. 
com/articles/three_hund_million_button) . 

A Amazon resolveu investigar e incrementar o formulario de cadastro 
pelo qual os consumidores passavam assim que terminavam de adicionar os 
produtos ao carrinho de compras na loja virtual. Em testes de usabilidade, 
a equipe de Jared percebeu que o problema não estava na usabilidade dos 
formulários (que eram relativamente simples de serem preenchidos), mas sim 
no que o formulário representava para os consumidores. 

Os consumidores raramente se lembravam de seu nome de usuário e 
senha na hora de fazer o login e continuar a compra. Para solucionar o prob- 
lema, eles simplesmente substituíram o botão de “Cadastro” pelo botão de 
“Continuar”, fazendo com que o login ou registro no site fosse um passo op- 
cional no fluxo de compra. Afinal, os consumidores estão mais preocupados 
em concluir a compra do que em criar um perfil em um site. 


14.2 CONVENCENDO O TIME A INVESTIR EM UX 


Quem trabalha com UX há vários anos já está acostumado a visualizar o re- 
torno sobre investimento (ROI) que a área traz para os negócios. Pequenos 
ajustes em fluxos de cadastro podem gerar altas porcentagens de conversão, 
melhorias em ferramentas de busca dentro do seu site podem aumentar dras- 
ticamente o tempo de navegação dos usuários e reduzir as taxas de abandono, 
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e mudanças na homepage de um site podem impactar diretamente quais são 
as páginas mais acessadas. 

Mas em alguns casos, obviamente, é preciso convencer outras pessoas a 
toparem investir em UX; o cliente, o seu chefe, o chefe de operações da em- 
presa e/ou os investidores. 

Não é uma tarefa fácil. Usar estudos de caso como esse da Amazon 
citado anteriormente pode ajudar bastante. Mas em contextos diferentes são 
necessárias estratégias diferentes de ajudar a outra parte a visualizar a possi- 
bilidade de retorno ao se investir em UX. 

Internamente, algumas das principais vantagens de ter um profissional de 
UX dentro do time é agilizar o processo de design, evitar refações em layouts 
e ainda facilitar a comunicação entre os membros do time. 

Externamente, na hora de provar ao cliente que ele precisa investir em 
um profissional de UX no projeto, a coisa muda de figura: é preciso encontrar 
formas criativas de exemplificar como os benefícios de ter um UX designer 
no time impacta diretamente os objetivos de negócios da empresa. Mas a 
dica aqui é criar um ou dois exemplos práticos que estejam diretamente rela- 
cionados à principal meta da empresa (por exemplo: otimizar o carrinho de 
compras no caso de um e-commerce). 
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CAPÍTULO 15 


Como começar em UX Design 


Nos últimos anos, tenho recebido muitas mensagens de pessoas que querem 
entrar na área de UX mas não têm certeza de qual a melhor forma de fazê- 
lo. Foi então que resolvi conectar alguns pontos para tentar ajudar quem está 
começando agora no mercado. 

Este livro, por exemplo, é um desses pontos. Se você chegou até aqui, 
espero que tenha tido um panorama relevante sobre o que é User Experience, 
o que faz um UX designer e quais são alguns dos dilemas mais comuns da 
profissão. 

Se você gostou do aperitivo e está interessado em seguir uma carreira den- 
tro da área de User Experience Design, este capítulo é para você. 
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15.1 O MERCADO DE UX NO BRASIL 


UX Design é uma carreira multidisciplinar, o que acaba trazendo para o 
mercado uma diversidade muito rica de profissionais, formados em diversas 
áreas do conhecimento. Jornalistas, bibliotecônomos (e bibliotecários), pub- 
licitários, designers, gerentes de projeto - o que conta mesmo é a organização, 
a capacidade de se colocar no lugar dos usuários e muito, muito bom senso. 

Em 2011, a UXPA (User Experience Professionals Association) fez uma 
pesquisa para levantar o perfil dos arquitetos de informação brasileiros: car- 
acterísticas demográficas, formação, cargo, salários, job description e inter- 
esses. Vale a pena dar uma olhada nos resultados e entender um pouco mais 
sobre mercado no qual você está pensando em entrar: http://www.slideshare. 
net/upasaopaulo/perfil-do-profissional-de-ux-no-brasil. 

Segundo dados do estudo, feito em 2011, 71% dos profissionais de UX 
brasileiros estão localizados na região sudeste do país, 46% na cidade de São 
Paulo. A distribuição de gêneros é equilibrada: 56% são homens e 44% mul- 
heres. 

86% dos profissionais brasileiros são graduados e/ou possuem algum tipo 
de pós-graduação, sendo 41% deles em áreas relacionadas a Artes e Design. 

Aqui um dado encorajador para quem está pretendendo entrar no mer- 
cado agora: 40% dos participantes do estudo se consideram autodidatas e 37% 
dizem que “aprenderam UX fazendo”. Somente 22% aprenderam UX em al- 
guma sala de aula. 

Os salários no Brasil variam muito, principalmente pelo fato de não existir 
uma regulamentação clara para a área. Segundo a mesma pesquisa da UXPA, 
um profissional Júnior (cerca de 1 ano de experiência) ganhava um salário 
mensal médio de R$2.252 em 2011. Para profissionais Plenos (entre 3 e 4 anos 
de experiência), o salário é de R$ 3.350 e para um Sênior (cerca de 6 anos 
de experiência), R$ 4.979. Nos cargos mais altos a média salarial ficava entre 
R$6.500 para supervisores e R$ 8.831 para gerentes em 2011. Mas nos últimos 
anos esse número aumentou bastante, dado o crescimento da procura por 
profissionais qualificados no mercado em todo o país. 
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15.2 ONDE TRABALHAR 


Apesar de mais e mais empresas procurarem e contratarem profissionais de 
UX, o número de UX designers espalhados pelo país ainda é relativamente 
pequeno se comparado com diretores de arte ou desenvolvedores- então não 
é muito comum encontrar um deles na fila do supermercado ou na padaria 
perto de sua casa. Mas mesmo que essas letras mágicas (“UX”) não apareçam 
no nome do cargo da pessoa, isso não quer dizer que ela não esteja projetando 
experiências para usuários. Como citado no início do livro, um programador 
ao desenvolver um site também acaba participando como um User Experi- 
ence designer. Afinal, as pessoas usarão aquela interface que o programador 
está criando e isso terá impacto direto na experiência delas. 

Ainda que nem todo mundo coloque “UX” no nome do cargo do 
Linkedin, o número de profissionais que o fazem ao redor do mundo é 
gigante: uma rápida busca pelo termo “UX designer” retornará mais de 
800 mil resultados, segundo pesquisa realizada em setembro de 2012 (http: 
//designmodo.com/future-user-experience-design) . Dizem até que “UX” é 
um dos termos que mais cresce na rede social. 

Segundo a pesquisa realizada pela UXPA em 2011 (http://www.slideshare. 
net/upasaopaulo/perfil-do-profissional-de-ux-no-brasil) , os lugares mais 
comuns para se trabalhar com UX no Brasil são, nessa ordem: agências de 
publicidade, empresas-cliente (ex.: Bradesco, Nike, Fiat), consultorias, por- 
tais (ex.: UOL, Globo.com) e produtoras web. Outros lugares da lista incluem 
institutos de pesquisa, governo, agências de comunicação e startups. 


15.3 COMO CONSEGUIR UM EMPREGO NA ÁREA 


Muita gente entra em contato comigo comentando sobre a vontade de mu- 
dar para UX definitivamente. Normalmente, essas pessoas já fazem algum 
trabalho relacionado a isso, mas estão procurando um emprego mais espe- 
cializado no assunto. 

Mas é um ciclo: você só será contratado como UX designer quando tiver 
um portfolio com trabalhos de UX. Mas se você nunca trabalhou com UX, 
como é que vai conseguir montar um portfolio? 


O caminho mais certeiro é o estágio: as empresas normalmente re- 
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querem nenhuma experiência anterior, a responsabilidade é menor e você 
terá chances de errar, acertar, e aprender no meio do processo. Depois de 
cerca de um ano você terá experiência suficiente no currículo para conseguir 
uma contratação. 

Se no seu caso o estágio é financeiramente inviável, uma opção é se pro- 
gramar antes (leia-se “juntar dinheiro”) para poder ficar alguns meses esta- 
giando antes de ser contratado. Mas se você já trabalha com algo relacionado 
a Design, é possível que consiga começar direto em um cargo de UX designer 
/ arquiteto de informação júnior. Nesse caso, é importante ser honesto nas 
entrevistas e deixar claro que você está fazendo a transição entre uma área e 
outra. 

Mas como encontrar essas vagas? 

Uma dica é procurar no Linkedin (ou em blogs e sites especializados no 
assunto) nomes de empresas que fazem um trabalho legal de User Experience, 
e passar a acompanhar o setor de vagas de seus sites. Ou então trocar uma 
ideia com pessoas que já trabalham na área e pedir dicas de quais empresas 
possuem profissionais de UX em seu quadro de funcionários. 

No Facebook, existe um grupo especializado em divulgar vagas de UX. Se 
você estiver efetivamente buscando uma vaga, recomendo dar uma passada 
por lá: https://www.facebook.com/groups/uxjobs. 

Mas será que eu sou qualificado o suficiente? 

Como dito no início do livro, os principais requisitos para se tornar um 
profissional de UX são empatia, bom senso e organização. Empatia, porque é 
preciso entender (e gostar de investigar) o que as pessoas precisam e querem 
ver quando estão usando produtos digitais. É preciso conversar com pessoas, 
é preciso saber fazer as perguntas certas e filtrar os resultados (é aqui que entra 
o bom senso). 

Mas se você nunca entrevistou usuários, não é preciso ter medo. Primeiro, 
porque é um processo que se aprende com a prática. Conheço profissionais 
que trabalham com pesquisa há anos e dizem que continuam aprendendo a 
cada nova sessão de entrevistas ou testes. E segundo, porque não existe certo 
ou errado; o que existem são formas diferentes de se chegar à mesma resposta. 

Organização é outra característica bastante desejável. No dia a dia do tra- 
balho de UX você acabará lidando com grandes quantidades de informação 
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em forma bruta, antes de fazer o exercício de simplificá-la e torná-la digerível 
para os usuários. É preciso ser organizado para não deixar escapar nenhum 
detalhe, já que normalmente são os pequenos detalhes que fazer a maior difer- 
ença na experiência do usuário -para o bem ou para o mal. 

Se você sente que se encaixa nesse perfil, vá em frente. O resto você 
aprende no meio do caminho, à medida que erra e acerta a cada projeto. 


15.4 COMO SE CONECTAR COM PROFISSIONAIS DE UX 


A grande maioria das vagas não é anunciada em lugares públicos; elas surgem 
de conhecidos, de contatos profissionais ou amigos de amigos. Converse com 
profissionais da área. Visite empresas que trabalham com isso e descubra mais 
do dia a dia de um profissional de UX. Participe de eventos - não apenas pelo 
conteúdo das palestras, mas pelas conversas que acontecem nos intervalos. 
Faça contatos e siga esses caras nas redes sociais para aprender um pouco 
sobre como eles pensam. 

Converse também com profissionais de áreas diferentes. Grande parte dos 
conhecimentos que ajudam um UX designer a ser um bom profissional não é 
exclusivo de User Experience. Converse com o time de tecnologia, com o time 
de planejamento, com os decisores de negócios - ou mesmo com amigos seus 
de outras áreas que já trabalharam com alguém de UX no passado. Como a 
área de UX transita entre várias outras áreas do conhecimento, essa troca de 
experiências com profissionais de perfis diferentes do seu é sempre válida. 


Grupos e listas de discussão 


Grupos de discussão também podem ser uma ótima fonte para saber o 
que está sendo falado na área e estabelecer contatos com outros profissionais. 
Minhas dicas de grupos: 


e No Facebook: https://www.facebook.com/groups/designdeinteracao/ 


e No Linkedin: https://www.linkedin. com/groups/AI-UX-Arquitetura- 
Informa%C3%A7%C3%A30-User-3209228 


e No Google Plus: https://plus.google.com/communities/ 
113160149077207243924 
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O IAI (Information Architecture Institute) possui uma lista de discussão 
em português da qual participam grande parte dos profissionais da área. 
Nessa lista são discutidas referências, estudos de caso, novas tecnologias, pro- 
cessos, metodologia, vagas, eventos e outros assuntos relacionados à profis- 
são, incluindo a organização de animados happy hours e outros encontros 
regionais entre UX designers e arquitetos de informação. Nesta página é pos- 
sível se inscrever para receber os e-mails e participar das discussões: http: 
//www.iainstitute.org/. 

Ha também a lista de discussão internacional do IxDA, com um volume 
ainda maior de participantes e de discussões, todas realizadas em inglês: http: 
//www.ixda.org/discussion. 


15.5 COMO SE MANTER ATUALIZADO 


Muita gente pergunta sobre “como aprender UX’, mas prefiro chamar de 
“como se manter atualizado sobre UX”. Isso porque UX nao é algo que se 
aprende da noite pro dia. Ler blogs do assunto, ler livros, assistir a palestras 
e ouvir podcasts são boas formas de ir adquirindo conhecimento. Esses con- 
teúdos estão cada vez mais acessíveis, quase sempre gratuitamente e online. 
Treine o inglês para conseguir absorver novos conteúdos. Na prática, quando 
você está rodeado por essas informações e continua se atualizando, é natural 
que durante os projetos você consiga pensar em todos os aspectos da exper- 


iência do usuário, sem sofrer ou ter receio de falhar. 
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Links, sites, blogs, podcasts e eventos 





Há algum tempo reuni em um único link as principais fontes e referências 
no assunto, incluindo sites, blogs, links, podcasts, eventos e profissionais para 
você seguir. Recomendo escolher alguns deles para começar a incorporar essa 
leitura no seu dia a dia: http://uxdesign.cc/. 

Costumo também publicar artigos em português semanalmente no http: 
//arquiteturadeinformacao.com. Não esqueça de dar uma passada por lá. 
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Livros de UX 





(showing 1-20 of 31) 


Steve Krug 


Everything Is 
Miscellaneous 


r 
N : bY PARA A INTERNET 





Se você está procurando alguns livros para continuar sua jor- 
nada de aprendizado, não deixe de conferir essa lista de livros de 
UX no GoodReads: https://www.goodreads.com/group/bookshelf/ 
43635-user-experience- design. 

Também selecionei alguns livros específicos sobre usabilidade em http: 
//fabricio.nu/usabilidade. 


Posts e artigos 


Compilei nesse link uma lista com os principais posts do meu blog 
para quem esta chegando agora na profissao: http://arquiteturadeinformacao. 
com/por-onde-comecar-em-ux- design. 


Paginas no Facebook 


Existe também um compilado de paginas no Facebook que falam sobre 
UX e Arquitetura de informação. Basta assinar a lista para passar a receber 
atualizações direto na sua página inicial do Facebook: https://www.facebook. 
com/lists/10150623977151406. 
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15.6 COMO APRENDER A USAR AS FERRAMENTAS 


Uma das vantages de UX é que conhecer e dominar as ferramentas não é 
algo essencial para conseguir um emprego na área. Não existe um padrão 
em relação à ferramenta utilizada entre as empresas (como é o caso do pacote 
Photoshop, Illustrator e InDesign para diretores de arte), e normalmente os 
wireframes e outros entregáveis podem ser criados a partir de qualquer ferra- 
menta básica de edição de imagens ou apresentações. Conheço profissionais 
que só usam PowerPoint e Excel e que são UX designers talentosíssimos. 

Mas ainda assim se você quiser ir se familiarizando com as ferramentas 
mais usadas, vale a pena baixar demos e testar, mesmo que seja com um pro- 
jeto fantasma. Algumas delas são online e gratuitas. Entender como essas 
ferramentas funcionam e o que é possível fazer com elas é mais importante 
do que possuir agilidade com elas, ou conhecer todos os atalhos - pelo menos 
no início da carreira de UX. 

Se quiser uma lista completa de ferramentas, recomendo visitar http:// 
fabricio.nu/ferramentas. A lista é extensa, mas não se preocupe: no dia a dia 
você vai poder escolher suas favoritas e as que o deixam mais confortáveis. Em 
UX normalmente não existe restrição, já que o mais importante é o raciocínio 
por trás do documento do que o formato final dele. 


15.7 MAS POR QUE TRABALHAR COM UX 


Essa é uma pergunta difícil, mas importante. Eu mesmo comecei minha car- 
reira como diretor de arte, mas resolvi fazer a migração para UX já no segundo 
ou terceiro ano de profissão. No fim do dia eu sentia falta de participar das 
discussões mais estratégicas a respeito do que estava sendo criado; ir além 
da camada visual e começar a pensar nas funcionalidades e interações que 
tornavam as tarefas possíveis. 

Veja a seguir um trecho de uma entrevista que fiz com a Elisa Volpato, 
consultora independente de UX que já trabalha há vários anos na profissão: 
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ENTREVISTA COM ELISA VOLPATO 


Como começou a trabalhar na área? 

Sou formada em jornalismo, mas já no meio do curso percebi que não 
levava muito jeito. Quando me formei e fiquei naquela crise de “agora vou 
ter que virar adulta” fui fazer uma entrevista de emprego e ouvi falar de 
arquitetura de informação. A entrevista não deu certo, mas foi a palavra- 
chave de que eu precisava para sair pesquisando por aí. Achei um exem- 
plar do urso branco, coloquei embaixo do braço e fui trabalhar em uma 
consultoria especializada em UX. 

Por que UX? 

Eu descobri que UX era o que eu queria fazer porque gostava de orga- 
nizar e investigar. Gosto muito de observar pessoas, de fazer entrevistas, 
testes, inventar técnicas malucas e pensar no melhor jeito de investigar 
um determinado ponto. É incrível quando dá certo e a gente pensa “Zás! 
Tá aqui a oportunidade! É isso que a gente tem que fazer!” 

Me empolga a possibilidade de criar coisas que podem ser úteis e fazer 
a diferença. Fico muito feliz quando um serviço funciona bem e gosto 
de pensar que o trabalho que eu faço pode deixar outras pessoas felizes 
também. E, se não deixar, espero que pelo menos alguém me dê um 
feedback para eu começar o ciclo todo de novo. 
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Se quiser conferir mais entrevistas com profissionais de UX e enten- 
der como eles começaram na área: http://arquiteturadeinformacao.com/ 
por-que-ux/ 


205 


CAPÍTULO 16 


O futuro da experiência do 
usuário 


Você deve ter reparado que a maioria dos exemplos citados neste livro trata 
de sites, aplicativos de celular ou interfaces que rodeiam nosso dia a dia. 

Mas e o que vem pela frente? 

Como funciona a experiência do usuário nos relógios inteligentes, nos 
óculos inteligentes, ou mesmo nos eletrodomésticos inteligentes que estão 
começando a surgir? 

A resposta é que os princípios, em sua essência, são os mesmos. Usabil- 
idade é usabilidade, independente da plataforma. Boas experiências de uso 
nos acompanham desde que nascemos - em objetos físicos, em espaços ar- 
quitetônicos, em produtos eletrônicos e digitais. E a tendência é que isso con- 
tinue igual, seja qual for a nova tecnologia do momento. 


Casa do Código 





Mas algumas coisas mudam. A forma como as pessoas interagem no celu- 
lar, por exemplo, é bem diferente da forma como as pessoas interagem com 
computadores desktop - e os designers tiveram que reaprender tudo isso com 
o crescimento do uso de celulares nos últimos anos. O simples fato de que nos 
computadores desktop você interage com o ponteiro do mouse e nos smart- 
phones você interage com a ponta dos dedos já faz uma diferença enorme na 
forma como as interfaces precisam ser desenhadas. 

A mesma coisa acontecerá com os óculos inteligentes e todos os outros 
objetos citados anteriormente. Em vez de cliques, as pessoas interagem com 
piscadas, acenos de cabeça e toques na haste do óculos. Isso muda completa- 
mente a forma como as interações são pensadas, mas não muda a essência e 
os princípios de usabilidade e experiência. 

Nos próximos anos, certamente surgirão livros especializados explicando 
“como desenhar interações para os smartwatches” (substitua pelo nome de 
qualquer objeto novo que venha a surgir). 

Os designers precisarão mais uma vez reaprender as melhores práticas, 
evitar os erros comuns e adequar sua documentação para essa nova reali- 
dade. E na velocidade com a qual a tecnologia se transforma, é esperado que 
num futuro próximo esses processos de “reinvenção” aconteçam em interva- 
los muito mais curtos de tempo. 

Mas, mais importante do que explicar os detalhes de cada uma dessas 
plataformas, o objetivo deste livro foi apresentar os conceitos básicos de User 
Experience e despertar o interesse em aprender mais sobre o assunto. Se você 
tiver interesse em acompanhar mais sobre essas novas plataformas, terei todo 
o prazer de acompanhá-lo na jornada. 


Você pode entrar em contato comigo em: http://fabricio.nu 
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